Default to light theme for first-time visitors

CLAUDE.md

@@ -50,7 +50,7 @@ Custom Starlight components in `src/components/` override defaults: `Head.astro`
 ## Styling Notes
 
 - Theme uses rounded corners (`--radius: 0.5rem`)
-- Dark mode is default; light mode uses violet accent (hue 285), dark uses teal/green (hue ~145)
+- Light mode is default; light mode uses violet accent (hue 285), dark uses teal/green (hue ~145)
 - Tailwind v4 custom variant: `@custom-variant dark (&:is(.dark *, [data-theme="dark"] *))`
 - Tables are auto-styled via rehype plugin with `data-slot` attributes for CSS targeting
 

src/components/ThemeProvider.astro

@@ -1,18 +1,18 @@
 ---
-// Custom ThemeProvider that defaults to dark instead of system preference
+// Custom ThemeProvider that defaults to light instead of system preference
 ---
 
 {/* This is intentionally inlined to avoid FOUC. */}
 <script is:inline>
 	window.StarlightThemeProvider = (() => {
 		const storedTheme =
 			typeof localStorage !== 'undefined' ? localStorage.getItem('starlight-theme') : null;
-		// null = never set any preference → default to dark
+		// null = never set any preference → default to light
 		// '' (empty string) = user chose 'auto' → use system preference
 		// 'light'/'dark' = user chose explicitly
 		let theme;
 		if (storedTheme === null) {
-			theme = 'dark';
+			theme = 'light';
 		} else if (storedTheme === '') {
 			theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
 		} else {

src/components/react/ThemeSwitcher.tsx

@@ -27,7 +27,7 @@ function getTheme(): Theme {
       return stored === '' ? 'auto' : stored;
     }
   }
-  return 'dark';
+  return 'light';
 }
 
 function setTheme(theme: Theme) {