Spaces:
Paused
Paused
icebear0828 commited on
Commit ·
f3c6831
1
Parent(s): 8146bd7
fix: add color-scheme declaration to prevent browser auto-darkening
Browse filesBrowsers with Auto Dark Mode (Chrome/Safari on macOS dark) override CSS
colors when color-scheme is not declared. Added color-scheme: light/dark
to :root/.dark CSS, index.html meta tag, and JS toggle to explicitly
control the color scheme per theme state.
- shared/theme/context.tsx +3 -1
- web/index.html +4 -2
- web/src/index.css +2 -0
shared/theme/context.tsx
CHANGED
|
@@ -18,13 +18,14 @@ function getInitialDark(): boolean {
|
|
| 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);
|
|
@@ -38,6 +39,7 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
|
|
| 38 |
} else {
|
| 39 |
document.documentElement.classList.remove("dark");
|
| 40 |
}
|
|
|
|
| 41 |
return next;
|
| 42 |
});
|
| 43 |
}, []);
|
|
|
|
| 18 |
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
| 19 |
}
|
| 20 |
|
| 21 |
+
// Sync dark class + color-scheme 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 |
+
document.documentElement.style.colorScheme = _initialDark ? "dark" : "light";
|
| 29 |
|
| 30 |
export function ThemeProvider({ children }: { children: ComponentChildren }) {
|
| 31 |
const [isDark, setIsDark] = useState(_initialDark);
|
|
|
|
| 39 |
} else {
|
| 40 |
document.documentElement.classList.remove("dark");
|
| 41 |
}
|
| 42 |
+
document.documentElement.style.colorScheme = next ? "dark" : "light";
|
| 43 |
return next;
|
| 44 |
});
|
| 45 |
}, []);
|
web/index.html
CHANGED
|
@@ -4,11 +4,13 @@
|
|
| 4 |
<meta charset="utf-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<title>Codex Proxy Developer Dashboard</title>
|
|
|
|
| 7 |
<script>
|
| 8 |
try {
|
| 9 |
const t = localStorage.getItem('codex-proxy-theme');
|
| 10 |
-
|
| 11 |
-
|
|
|
|
| 12 |
} catch {}
|
| 13 |
</script>
|
| 14 |
</head>
|
|
|
|
| 4 |
<meta charset="utf-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<title>Codex Proxy Developer Dashboard</title>
|
| 7 |
+
<meta name="color-scheme" content="light dark">
|
| 8 |
<script>
|
| 9 |
try {
|
| 10 |
const t = localStorage.getItem('codex-proxy-theme');
|
| 11 |
+
const isDark = t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
| 12 |
+
if (isDark) document.documentElement.classList.add('dark');
|
| 13 |
+
document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
|
| 14 |
} catch {}
|
| 15 |
</script>
|
| 16 |
</head>
|
web/src/index.css
CHANGED
|
@@ -5,11 +5,13 @@
|
|
| 5 |
:root {
|
| 6 |
--primary: 16 162 53;
|
| 7 |
--primary-hover: 14 140 46;
|
|
|
|
| 8 |
}
|
| 9 |
|
| 10 |
.dark {
|
| 11 |
--primary: 16 163 127;
|
| 12 |
--primary-hover: 14 140 108;
|
|
|
|
| 13 |
}
|
| 14 |
|
| 15 |
/* Dark scrollbar for code blocks */
|
|
|
|
| 5 |
:root {
|
| 6 |
--primary: 16 162 53;
|
| 7 |
--primary-hover: 14 140 46;
|
| 8 |
+
color-scheme: light;
|
| 9 |
}
|
| 10 |
|
| 11 |
.dark {
|
| 12 |
--primary: 16 163 127;
|
| 13 |
--primary-hover: 14 140 108;
|
| 14 |
+
color-scheme: dark;
|
| 15 |
}
|
| 16 |
|
| 17 |
/* Dark scrollbar for code blocks */
|