feat: use two styles

astro.config.mjs

@@ -4,6 +4,70 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import path from "path";
 
+const midnight = {
+  name: "midnight",
+  type: "dark",
+  colors: {
+    "editor.background": "#121212",
+    "editor.foreground": "#e0e0e0",
+  },
+  tokenColors: [
+    {
+      scope: [
+        "keyword",
+        "storage.type",
+        "storage.modifier",
+        "keyword.control",
+        "keyword.operator.new",
+      ],
+      settings: { foreground: "#7aa2f7" },
+    },
+    {
+      scope: [
+        "string",
+        "constant",
+        "constant.numeric",
+        "constant.language",
+        "constant.character",
+        "number",
+      ],
+      settings: { foreground: "#e5c07b" },
+    },
+  ],
+};
+
+const daylight = {
+  name: "daylight",
+  type: "light",
+  colors: {
+    "editor.background": "#f5f5f5",
+    "editor.foreground": "#1a1a1a",
+  },
+  tokenColors: [
+    {
+      scope: [
+        "keyword",
+        "storage.type",
+        "storage.modifier",
+        "keyword.control",
+        "keyword.operator.new",
+      ],
+      settings: { foreground: "#3b5bdb" },
+    },
+    {
+      scope: [
+        "string",
+        "constant",
+        "constant.numeric",
+        "constant.language",
+        "constant.character",
+        "number",
+      ],
+      settings: { foreground: "#996800" },
+    },
+  ],
+};
+
 export default defineConfig({
   build: {
     format: "file",
@@ -23,7 +87,10 @@ export default defineConfig({
   },
   markdown: {
     shikiConfig: {
-      theme: "github-light",
+      themes: {
+        light: daylight,
+        dark: midnight,
+      },
       langs: [],
       wrap: true,
     },

public/styles/posts.css

@@ -118,12 +118,13 @@ article pre {
   padding: 1rem;
   overflow-x: auto;
   border-radius: 4px;
-  background: var(--code-bg) !important;
   border: 1px solid var(--border);
 }
 
-pre * {
+[data-theme="dark"] .astro-code,
-  background: var(--code-bg) !important;
+[data-theme="dark"] .astro-code span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
 }
 
 :not(pre) > code {
@@ -133,7 +134,7 @@ pre * {
   white-space: nowrap;
   border: 1px solid var(--border);
   border-radius: 4px;
-  background: var(--code-bg) !important;
+  background: var(--code-bg);
 }
 
 .astro-code {