Spaces:
Paused
Paused
icebear0828 Claude Opus 4.6 (1M context) commited on
Commit ·
b4b60dc
1
Parent(s): b94940f
fix: dark mode not applying on initial load
Browse filesThemeProvider only set the dark class on toggle, not on initialization.
Users with system dark mode or saved "dark" preference would see light
theme until they manually toggled. Now sync dark class to <html> before
first render.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- shared/theme/context.tsx +9 -1
shared/theme/context.tsx
CHANGED
|
@@ -18,8 +18,16 @@ function getInitialDark(): boolean {
|
|
| 18 |
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
| 19 |
}
|
| 20 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
export function ThemeProvider({ children }: { children: ComponentChildren }) {
|
| 22 |
-
const [isDark, setIsDark] = useState(
|
| 23 |
|
| 24 |
const toggle = useCallback(() => {
|
| 25 |
setIsDark((prev) => {
|
|
|
|
| 18 |
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
| 19 |
}
|
| 20 |
|
| 21 |
+
// Sync dark class to <html> on initial load (before first render to avoid flash)
|
| 22 |
+
const _initialDark = getInitialDark();
|
| 23 |
+
if (_initialDark) {
|
| 24 |
+
document.documentElement.classList.add("dark");
|
| 25 |
+
} else {
|
| 26 |
+
document.documentElement.classList.remove("dark");
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
export function ThemeProvider({ children }: { children: ComponentChildren }) {
|
| 30 |
+
const [isDark, setIsDark] = useState(_initialDark);
|
| 31 |
|
| 32 |
const toggle = useCallback(() => {
|
| 33 |
setIsDark((prev) => {
|