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

set the color-scheme CSS property to either light or dark onChange

Browse Source 
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
This commit is contained in:
Jake Jarvis
2021-12-16 19:53:13 -05:00
parent 7fbdf16573
commit 6bfbc363d7
4 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/restore-theme.js
+8 -12
View File
@@ -1,17 +1,13 @@
/* eslint-disable no-var */
// A super tiny script to restore dark mode off the bat (to hopefully avoid blinding flashes of white).
// NOTE: This is inlined by Hugo/esbuild (see layouts/partials/head/restore-theme.html) instead of Webpack.
// ANOTHER NOTE: Whenever this code is changed, its (minified) CSP hash *MUST* be updated manually in vercel.json.
import { getDarkPref } from "./src/utils/theme.js";
import { getDarkPref, updateDOM } from "./src/utils/theme.js";
try {
var cl = document.documentElement.classList;
var pref = getDarkPref();
// set `<html class="dark">` if either the user has explicitly toggled in the past or if their OS is in dark mode
if (pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
cl.remove("light");
cl.add("dark");
}
} catch (error) {}
// Set root class and color-scheme property to dark if either...
// - the user has explicitly toggled it previously.
// - the user's OS is in dark mode.
const pref = getDarkPref();
updateDOM(pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches));
} catch (e) {}