style: Add dark mode styles for code blocks in CSS and update TSX import

stubby-cms · Dec 22, 2024 · ad6e83b · ad6e83b
1 parent 843589c
commit ad6e83b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/lib/Code/Code.css b/lib/Code/Code.css
@@ -0,0 +1,9 @@
+html.dark .code-block,
+html.dark .code-block span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
diff --git a/lib/Code/Code.tsx b/lib/Code/Code.tsx
@@ -4,6 +4,7 @@ import { codeToHast } from 'shiki';
 import { Components, toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import { Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import './Code.css';
 
 interface Props {
   children: string;