jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-07-25 04:55:58 -04:00
Code Issues Activity

bump next (again)

Browse Source
This commit is contained in:
jake
2023-10-03 13:55:54 -04:00
parent 893db7e951
commit bc77e502b9
4 changed files with 119 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ThemeScript/ThemeScript.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { memo } from "react";
import { minify } from "uglify-js";
import type { MinifyOutput } from "uglify-js";
import { clientScript } from "./client.js";
import { restoreTheme as clientFn } from "./client.js";
export type ThemeScriptProps = {
themeClassNames: {
@@ -16,7 +16,7 @@ const ThemeScript = memo<ThemeScriptProps>(({ themeClassNames, themeStorageKey }
const minified = (() => {
// since the client function will end up being injected as a static hard-coded string, we need to determine all of
// the dynamic values within it *before* generating the final script.
const source = String(clientScript)
const source = String(clientFn)
.replaceAll("__MEDIA_QUERY__", "(prefers-color-scheme: dark)")
.replaceAll("__STORAGE_KEY__", themeStorageKey)
.replaceAll("__CLASS_NAMES__", Object.values(themeClassNames).join('","'));
components/ThemeScript/client.js
+5 -4
View File
@@ -2,15 +2,16 @@
// this function is converted to a string verbatim, substitutions are made to insert dynamic values, minified, and then
// finally exported as an inline `<script>` tag in ThemeScript.tsx for _document.tsx to use.
export const clientScript = () => {
export const restoreTheme = () => {
// `try/catch` in case I messed something up here bigly... (will default to light theme)
try {
// the list of <html>'s current class(es)...
const { classList } = document.documentElement;
// map of themes -> classnames ([0]=light, [1]=dark)
const classNames = ["__CLASS_NAMES__"];
// the list of <html>'s current class(es)...
// eslint-disable-next-line prefer-destructuring
const classList = document.documentElement.classList;
// user's saved preference
const pref = window.localStorage.getItem("__STORAGE_KEY__");
const pref = typeof Storage !== "undefined" ? window.localStorage.getItem("__STORAGE_KEY__") : null;
// restore the local storage preference if it's set, otherwise test CSS media query for browser dark mode preference
// https://stackoverflow.com/a/57795495/1438024