Add light/dark mode support for code blocks

astro.config.mjs

···
     // @ts-expect-error idk why this gets flagged as wrong
     rehypePlugins: [rehypeAccessibleEmojis, rehypeCustomHtml],
     shikiConfig: {
-      theme: "catppuccin-frappe",
+      themes: {
+        dark: "catppuccin-frappe",
+        light: "github-light-high-contrast",
+      },
+      defaultColor: false,
     },
   },
 });

src/config.ts

···
         background: {
           main: "#f2f6fc",
           secondary: "#e7e8ea",
+          code: "#ffffff",
         },
         typography: {
           body: "#070e21",
···
         background: {
           main: "#262428",
           secondary: "#161418",
+          code: "#303446",
         },
         typography: {
           body: "#ffebff",

src/pages/blog/[id].astro

···
 
   <style>
     .lang {
-      color: white;
+      color: var(--typo-body);
     }
 
     button {
       border: none;
-      background-color: #ffffff20;
+      background: none;
 
-      border-radius: 0.5rem;
-      padding: 0;
-      width: 2.8rem;
-      height: 2.8rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       & svg {
-        stroke: var(--_dark-typo-body);
+        stroke: var(--typo-body);
         margin: 0.2rem;
       }
     }
···
       position: sticky;
       top: 0;
       left: 0;
-      background-color: color-mix(
-        in oklab,
-        var(--_dark-bg-main),
-        var(--_dark-bg-secondary)
-      );
+      border-bottom: 0.4rem solid var(--bg-main);
       user-select: none;
     }
   </style>
···
     }
 
     .astro-code {
-      background-color: var(--_dark-bg-secondary) !important;
+      background-color: var(--bg-code) !important;
       margin-block: 1rem;
       padding: 0;
       position: relative;
···
       & code {
         display: block;
         padding: 1rem;
+
+        & span {
+          color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
+        }
       }
     }
 
···
       var(--_light-bg-secondary),
       var(--_dark-bg-secondary)
     );
+
+    --bg-code: light-dark(var(--_light-bg-code), var(--_dark-bg-code));
 
     --typo-body: light-dark(var(--_light-typo-body), var(--_dark-typo-body));
 
···
 :root {
   --_light-bg-main: ${light.background.main};
   --_light-bg-secondary: ${light.background.secondary};
+  --_light-bg-code: ${light.background.code};
   --_light-typo-body: ${light.typography.body};
   --_light-typo-heading: ${light.typography.heading};
   --_light-typo-subheading: ${light.typography.subheading};
···
   
   --_dark-bg-main: ${dark.background.main};
   --_dark-bg-secondary: ${dark.background.secondary};
+  --_dark-bg-code: ${dark.background.code};
   --_dark-typo-body: ${dark.typography.body};
   --_dark-typo-heading: ${dark.typography.heading};
   --_dark-typo-subheading: ${dark.typography.subheading};