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:
@@ -35,11 +35,17 @@ export function ThemeProvider({
|
||||
...props
|
||||
}: ThemeProviderProps) {
|
||||
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" => {
|
||||
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
|
||||
? "dark"
|
||||
: "light"
|
||||
|
||||
Reference in New Issue
Block a user