Repository navigation
Expand file tree
/
Copy pathconfig.ts
More file actions
51 lines (43 loc) · 1.74 KB
/
Copy pathconfig.ts
File metadata and controls
51 lines (43 loc) · 1.74 KB
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// The color mode: data-bs-theme on <html>, stored in localStorage as
// adminkit_config_colorMode. The script in index.html applies the stored mode before the
// first paint; afterwards it changes only through setColorMode, which fires
// adminkit:colormodechange on document.
import appearance from "@/data/appearance.json";
export const storagePrefix = "adminkit_config_";
/** light and dark are what the stylesheet has; auto follows the operating system. */
export const colorModes = [...appearance.colorModes, "auto"] as const;
export type ColorMode = "light" | "dark" | "auto";
export const getStored = (name: string): string | null => {
try {
return localStorage.getItem(`${storagePrefix}${name}`);
} catch {
// Storage is unavailable (private mode)
return null;
}
};
export const setStored = (name: string, value: string) => {
try {
localStorage.setItem(`${storagePrefix}${name}`, value);
} catch {
// Storage is unavailable (private mode); the setting still applies to this page
}
};
const systemDark = () => matchMedia("(prefers-color-scheme: dark)").matches;
export const getColorMode = (): ColorMode => {
const mode = getStored("colorMode");
return mode === "light" || mode === "dark" ? mode : "auto";
};
/** The mode <html> shows: light or dark. */
export const resolveColorMode = (mode: ColorMode) =>
mode === "auto" ? (systemDark() ? "dark" : "light") : mode;
/** Stores the mode, sets data-bs-theme and announces the change. */
export const setColorMode = (mode: ColorMode) => {
setStored("colorMode", mode);
document.documentElement.setAttribute(
"data-bs-theme",
resolveColorMode(mode)
);
document.dispatchEvent(
new CustomEvent("adminkit:colormodechange", { detail: { colorMode: mode } })
);
};