jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-29 19:05:58 -04:00
Code Issues Activity

wait did I actually fix the OS dark mode event listener...?!

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-16 11:35:22 -05:00
parent fe1a10d437
commit 65d413ca8c
3 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/src/components/ThemeToggle.js
+15 -9
View File
@@ -11,16 +11,22 @@ const ThemeToggle = () => {
const [dark, setDark] = useState(isDark());
const [saved, setSaved] = useState(!!getDarkPref());
// real-time switching between modes if preference isn't set (and it's supported by OS/browser)
const callback = useCallback((e) => setDark(e.matches), []);
// real-time switching between modes based on system if preference isn't set (and it's supported by OS/browser)
const matchCallback = useCallback((e) => setDark(e.matches), []);
useEffect(() => {
if (saved) {
// TODO: FIX THIS...
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", callback, true);
} else {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", callback, true);
}
}, [saved, callback]);
try {
// https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
const matcher = window.matchMedia("(prefers-color-scheme: dark)");
// only listen to OS if the user hasn't specified a preference
if (!saved) {
matcher.addEventListener("change", matchCallback, true);
}
// cleanup and stop listening if/when preference is explicitly set
return () => matcher.removeEventListener("change", matchCallback, true);
} catch (e) {}
}, [saved, matchCallback]);
useEffect(() => {
// sets appropriate `<html class="...">`