javascript see if chrome is in dark mode
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
//To watch for changes:
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newColorScheme = e.matches ? "dark" : "light";
});
//Or in React Hooks:
const [mode, setMode] = useState<"light" | "dark" | undefined>(
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" :"light"
);
useEffect(() => {
const modeMe = (e: any) => {
setMode(e.matches ? "dark" : "light");
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', modeMe);
return window.matchMedia('(prefers-color-scheme: dark)').removeListener(modeMe);
}, []);