Spaces:
Running
Running
File size: 3,526 Bytes
fc69895 |
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
export type ThemePreference = "light" | "dark" | "system";
type ThemeState = {
preference: ThemePreference;
isDark: boolean;
};
type ThemeSubscriber = (state: ThemeState) => void;
let currentPreference: ThemePreference = "system";
const subscribers = new Set<ThemeSubscriber>();
function notify(preference: ThemePreference, isDark: boolean) {
for (const subscriber of subscribers) {
subscriber({ preference, isDark });
}
}
export function subscribeToTheme(subscriber: ThemeSubscriber) {
subscribers.add(subscriber);
if (typeof document !== "undefined") {
const preference = getThemePreference();
const isDark = document.documentElement.classList.contains("dark");
subscriber({ preference, isDark });
} else {
subscriber({ preference: "system", isDark: false });
}
return () => {
subscribers.delete(subscriber);
};
}
function setMetaThemeColor(isDark: boolean) {
const metaTheme = document.querySelector('meta[name="theme-color"]') as HTMLMetaElement | null;
if (!metaTheme) return;
metaTheme.setAttribute("content", isDark ? "rgb(26, 36, 50)" : "rgb(249, 250, 251)");
}
function applyDarkClass(isDark: boolean) {
const { classList } = document.querySelector("html") as HTMLElement;
if (isDark) classList.add("dark");
else classList.remove("dark");
setMetaThemeColor(isDark);
notify(currentPreference, isDark);
}
export function getThemePreference(): ThemePreference {
const raw = typeof localStorage !== "undefined" ? localStorage.getItem("theme") : null;
if (raw === "light" || raw === "dark" || raw === "system") {
currentPreference = raw;
return raw;
}
currentPreference = "system";
return "system";
}
/**
* Explicitly set the theme preference and apply it immediately.
* - "light": force light
* - "dark": force dark
* - "system": follow the OS preference
*/
export function setTheme(preference: ThemePreference) {
try {
localStorage.theme = preference;
} catch (_err) {
void 0; // ignore write errors
}
const mql = window.matchMedia("(prefers-color-scheme: dark)");
currentPreference = preference;
const resolve = () =>
applyDarkClass(preference === "dark" || (preference === "system" && mql.matches));
// Apply now
resolve();
// If following system, listen for changes; otherwise remove listener
const listener = () => resolve();
// Store on window to allow replacing listener later
const key = "__theme_mql_listener" as const;
const w = window as unknown as {
[key: string]: ((this: MediaQueryList, ev: MediaQueryListEvent) => void) | undefined;
};
const existing = w[key];
if (existing) {
try {
mql.removeEventListener("change", existing);
} catch (_err) {
// older Safari compatibility
const legacy = (
mql as unknown as {
removeListener?: (l: (this: MediaQueryList, ev: MediaQueryListEvent) => void) => void;
}
).removeListener;
legacy?.(existing);
}
w[key] = undefined;
}
if (preference === "system") {
try {
mql.addEventListener("change", listener);
} catch (_err) {
// older Safari compatibility
const legacy = (
mql as unknown as {
addListener?: (l: (this: MediaQueryList, ev: MediaQueryListEvent) => void) => void;
}
).addListener;
legacy?.(listener);
}
w[key] = listener;
}
}
// Backward-compatible toggle used by the sidebar button
export function switchTheme() {
const html = document.querySelector("html") as HTMLElement;
const isDark = html.classList.contains("dark");
const next: ThemePreference = isDark ? "light" : "dark";
setTheme(next);
}
|