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

move light/dark class from <body> to <html> and inline restoration script to (hopefully) improve the white flashes

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-15 13:49:56 -05:00
parent c2789e24d4
commit 766362a9da
14 changed files with 61 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/restore-theme.js
+21
View File
@@ -0,0 +1,21 @@
/* 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.
import { getDarkPref } 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");
}
// TODO: fix real-time switching (works but bulb icon isn't updated)
// window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => e.matches && setDark(true));
// window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (e) => e.matches && setDark(false));
} catch (error) {}