generated from react18-tools/turborepo-template
-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
no-fouc.ts
28 lines (26 loc) · 1.15 KB
/
no-fouc.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { ColorSchemePreference, ResolvedScheme } from "../../utils";
declare global {
// skipcq: JS-0102, JS-C1002, JS-0239
var u: (mode: ColorSchemePreference, systemMode: ResolvedScheme) => void;
// skipcq: JS-0102, JS-C1002, JS-0239
var m: MediaQueryList;
}
/** function to be injected in script tag for avoiding FOUC */
export const noFOUCScript = (storageKey: string) => {
const [SYSTEM, DARK] = ["system", "dark"] as const;
window.u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
const resolvedMode = mode === SYSTEM ? systemMode : mode;
const el = document.documentElement;
if (resolvedMode === DARK) el.classList.add(DARK);
else el.classList.remove(DARK);
[
["sm", systemMode],
["rm", resolvedMode],
["m", mode],
].forEach(([dataLabel, value]) => el.setAttribute(`data-${dataLabel}`, value));
// System mode is decided by current system state and need not be stored in localStorage
localStorage.setItem(storageKey, mode);
};
window.m = matchMedia(`(prefers-color-scheme: ${DARK})`);
u((localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference, m.matches ? DARK : "");
};