Let the theme provider render without a browser

The sibling index frontend now prerenders its public pages, where the initial
state read of localStorage and the matchMedia probe both run with no browser
present. The design contract keeps this file byte-identical across the two
repos, so the guards land here in the same change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-21 15:13:18 +02:00
co-authored by Claude Opus 5
parent b6ed8029b6
commit da6f4b9d46
+7 -1
View File
@@ -35,11 +35,17 @@ export function ThemeProvider({
...props ...props
}: ThemeProviderProps) { }: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>( const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme, () =>
(typeof localStorage !== "undefined"
? (localStorage.getItem(storageKey) as Theme)
: null) || defaultTheme,
) )
const getResolvedTheme = useCallback((theme: Theme): "dark" | "light" => { const getResolvedTheme = useCallback((theme: Theme): "dark" | "light" => {
if (theme === "system") { if (theme === "system") {
// Prerendered HTML has no preference to read; the pre-paint script in
// the document head resolves it before React ever hydrates.
if (typeof window === "undefined") return "light"
return window.matchMedia("(prefers-color-scheme: dark)").matches return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark" ? "dark"
: "light" : "light"