jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 05:45:33 -04:00
Code Issues Activity

minify inline theme script even more

Browse Source
This commit is contained in:
Jake Jarvis
2022-04-23 21:04:50 -04:00
parent 4f0002af0f
commit 07562f625e
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/ThemeScript/ThemeScript.tsx
View File

@@ -9,13 +9,7 @@ const ThemeScript = () => {
const functionString = String(clientScript)
.replace('"__MEDIA_QUERY__"', `"${darkModeQuery}"`)
.replace('"__STORAGE_KEY__"', `"${themeStorageKey}"`)
.replace('"__CLASS_NAMES__"', JSON.stringify(themeClassNames))
.replace(
'"__LIST_OF_CLASSES__"',
Object.values(themeClassNames)
.map((t) => `"${t}"`)
.join(",")
);
.replace('"__CLASS_NAMES__"', JSON.stringify(themeClassNames));
// minify the final code, a bit hacky but this is ONLY done at build-time, so uglify-js is never bundled or sent to
// the browser to execute:

28
components/ThemeScript/script.js
View File

@@ -5,23 +5,29 @@
export const clientScript = () => {
// `try/catch` in case I messed something up here bigly... (will default to light theme)
try {
// user's saved preference:
// help minifier minify
var light = "light";
var dark = "dark";
var newTheme;
// user's saved preference
var pref = localStorage.getItem("__STORAGE_KEY__");
// map of theme -> classname:
// map of theme -> classname
var classNames = "__CLASS_NAMES__";
// the list of <html>'s current class(es)...
var classList = document.documentElement.classList;
// ...from which `classNames` are removed to start fresh:
classList.remove("__LIST_OF_CLASSES__");
// ...from which `classNames` are removed to start fresh
classList.remove(classNames[light], classNames[dark]);
if (pref === "light" || pref === "dark") {
classList.add(classNames[pref]);
if (pref === light || pref === dark) {
// simply restore the local storage preference
newTheme = pref;
} else {
// CSS media query for system dark mode preference:
var darkQuery = "__MEDIA_QUERY__";
// the listener which tests the above media query:
var prefersDark = window.matchMedia(darkQuery);
classList.add(classNames[prefersDark.media !== darkQuery || prefersDark.matches ? "dark" : "light"]);
// test CSS media query for system dark mode preference
// https://stackoverflow.com/a/57795495/1438024
newTheme = window.matchMedia("__MEDIA_QUERY__").matches ? dark : light;
}
// FINALLY set the root class
classList.add(classNames[newTheme]);
} catch (error) {}
};