nits

astro.config.mjs

@@ -25,7 +25,9 @@ export default defineConfig({
       themes: {
         light: 'github-light',
         dark: 'github-dark'
-      }
+      },
+      // CSS vars only — colors live in `code.css.ts` (`light-dark()` + dark-mode var fallback).
+      defaultColor: false
     }
   },
   integrations: [

src/components/BaseHead.astro

@@ -15,6 +15,7 @@ const {title, description, image = '/blog/hello-world.jpg'} = Astro.props;
 
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="color-scheme" content="light dark" />
 <link rel="icon" href="/favicon.ico" />
 <meta name="generator" content={Astro.generator} />
 

src/styles/code.css.ts

@@ -7,8 +7,9 @@ import {fonts, palette} from './tokens';
  * Styles.
  */
 
-// Shiki dual themes: Astro sets --shiki-light/dark vars on .astro-code spans.
-// https://docs.astro.build/en/guides/syntax-highlighting/
+// Shiki `.astro-code` layout + theming. `defaultColor: false` in `astro.config.mjs` emits
+// `--shiki-*` vars only. We theme in CSS (not Shiki inline `light-dark()` — that stayed on
+// the light branch in dark mode here). `@media (prefers-color-scheme: dark)` uses dark vars.
 
 globalStyle('pre.astro-code', {
   fontFamily: fonts.mono,
@@ -17,11 +18,16 @@ globalStyle('pre.astro-code', {
   borderRadius: '10px',
   padding: '1.1em 1.25em',
   overflowX: 'auto',
+  maxWidth: '100%',
   margin: '1.5em 0',
   border: `1px solid ${palette.border}`,
+  color: 'light-dark(var(--shiki-light), var(--shiki-dark))',
+  backgroundColor: 'light-dark(var(--shiki-light-bg), var(--shiki-dark-bg))',
   '@media': {
     [media.dark]: {
-      borderColor: palette.borderDark
+      borderColor: palette.borderDark,
+      color: 'var(--shiki-dark)',
+      backgroundColor: 'var(--shiki-dark-bg)'
     },
     [media.highContrast]: {
       borderWidth: '2px'
@@ -30,18 +36,10 @@ globalStyle('pre.astro-code', {
 });
 
 globalStyle('pre.astro-code span', {
-  color: 'var(--shiki-light)',
-  backgroundColor: 'var(--shiki-light-bg)',
-  fontStyle: 'var(--shiki-light-font-style)',
-  fontWeight: 'var(--shiki-light-font-weight)',
-  textDecoration: 'var(--shiki-light-text-decoration)',
+  color: 'light-dark(var(--shiki-light), var(--shiki-dark))',
   '@media': {
     [media.dark]: {
-      color: 'var(--shiki-dark)',
-      backgroundColor: 'var(--shiki-dark-bg)',
-      fontStyle: 'var(--shiki-dark-font-style)',
-      fontWeight: 'var(--shiki-dark-font-weight)',
-      textDecoration: 'var(--shiki-dark-text-decoration)'
+      color: 'var(--shiki-dark)'
     }
   }
 });

src/styles/global.css.ts

@@ -19,6 +19,8 @@ globalStyle('html', {
   lineHeight: 1.65,
   color: palette.text,
   backgroundColor: palette.pageBg,
+  // Enables CSS `light-dark()` on code blocks. Dark vars fallback in `code.css.ts`.
+  colorScheme: 'light dark',
   textRendering: 'optimizeLegibility',
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale',