codeblock multi theme fixed

HYP3R00T · Aug 3, 2024 · c69e726 · c69e726
1 parent 4e75418
commit c69e726
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -11,7 +11,11 @@ export default defineConfig({
  smartypants: true,
  syntaxHighlight: "shiki",
  shikiConfig: {
- theme: "catppuccin-mocha",
+ // theme: "catppuccin-mocha",
+ themes: {
+ light: "catppuccin-latte",
+ dark: "catppuccin-macchiato",
+ },
  },
  rehypePlugins: [
  [

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -106,6 +106,10 @@ blockquote {
  @apply mt-6 border-l-2 pl-6 italic border-primary;
 }
 
+pre {
+ @apply border rounded;
+}
+
 ul {
  @apply my-6 ml-6 list-disc [&>li]:mt-2;
 }
@@ -236,3 +240,14 @@ td {
 .callout a {
  @apply hover:text-background;
 }
+
+/* shiki theme */
+html.dark .astro-code,
+html.dark .astro-code 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;
+}