From 86f45bc4558ce25cf0c5e57122e3d413af8c2539 Mon Sep 17 00:00:00 2001 From: Kristin Martin Date: Thu, 9 Jul 2026 17:16:17 +0000 Subject: [PATCH 1/2] Default to light theme for first-time visitors Visitors with no stored preference now get light mode instead of dark. Explicit picker choices and the auto (system preference) option are unchanged. --- CLAUDE.md | 2 +- src/components/ThemeProvider.astro | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 140d432..307e807 100644 --- a/CLAUDE.md +++ b/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 diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro index 44ac405..5f4da99 100644 --- a/src/components/ThemeProvider.astro +++ b/src/components/ThemeProvider.astro @@ -1,5 +1,5 @@ --- -// 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. */} @@ -7,12 +7,12 @@ 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 { From 22e2ee7bdb4986637509e5f7eaf1a434c95b8497 Mon Sep 17 00:00:00 2001 From: Kristin Martin Date: Thu, 9 Jul 2026 17:29:46 +0000 Subject: [PATCH 2/2] Show the sun icon in the theme picker for the light default The ThemeSwitcher had its own fallback of 'dark' for visitors with no stored preference, so the picker icon showed the moon while the page rendered light. --- src/components/react/ThemeSwitcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/react/ThemeSwitcher.tsx b/src/components/react/ThemeSwitcher.tsx index bf67dc2..61ddf31 100644 --- a/src/components/react/ThemeSwitcher.tsx +++ b/src/components/react/ThemeSwitcher.tsx @@ -27,7 +27,7 @@ function getTheme(): Theme { return stored === '' ? 'auto' : stored; } } - return 'dark'; + return 'light'; } function setTheme(theme: Theme) {