2024-06-23 09:25:48 +00:00
|
|
|
import { c as create_ssr_component, b as add_attribute } from './ssr-ipqebOFl.js';
|
|
|
|
import { d as derived, w as writable } from './index2-D4yenS_5.js';
|
2024-06-21 23:07:37 +00:00
|
|
|
|
|
|
|
let timeoutAction;
|
|
|
|
let timeoutEnable;
|
|
|
|
function withoutTransition(action) {
|
|
|
|
if (typeof document === "undefined")
|
|
|
|
return;
|
|
|
|
clearTimeout(timeoutAction);
|
|
|
|
clearTimeout(timeoutEnable);
|
|
|
|
const style = document.createElement("style");
|
|
|
|
const css = document.createTextNode(`* {
|
|
|
|
-webkit-transition: none !important;
|
|
|
|
-moz-transition: none !important;
|
|
|
|
-o-transition: none !important;
|
|
|
|
-ms-transition: none !important;
|
|
|
|
transition: none !important;
|
|
|
|
}`);
|
|
|
|
style.appendChild(css);
|
|
|
|
const disable = () => document.head.appendChild(style);
|
|
|
|
const enable = () => document.head.removeChild(style);
|
|
|
|
if (typeof window.getComputedStyle !== "undefined") {
|
|
|
|
disable();
|
|
|
|
action();
|
|
|
|
window.getComputedStyle(style).opacity;
|
|
|
|
enable();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (typeof window.requestAnimationFrame !== "undefined") {
|
|
|
|
disable();
|
|
|
|
action();
|
|
|
|
window.requestAnimationFrame(enable);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
disable();
|
|
|
|
timeoutAction = window.setTimeout(() => {
|
|
|
|
action();
|
|
|
|
timeoutEnable = window.setTimeout(enable, 120);
|
|
|
|
}, 120);
|
|
|
|
}
|
|
|
|
const noopStorage = {
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
|
getItem: (_key) => null,
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
|
setItem: (_key, _value) => {
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const isBrowser = typeof document !== "undefined";
|
|
|
|
const modes = ["dark", "light", "system"];
|
|
|
|
const localStorageKey = "mode-watcher-mode";
|
|
|
|
const userPrefersMode = createUserPrefersMode();
|
|
|
|
const systemPrefersMode = createSystemMode();
|
|
|
|
const themeColors = writable(void 0);
|
|
|
|
const disableTransitions = writable(true);
|
|
|
|
const derivedMode = createDerivedMode();
|
|
|
|
function createUserPrefersMode() {
|
|
|
|
const defaultValue = "system";
|
|
|
|
const storage = isBrowser ? localStorage : noopStorage;
|
|
|
|
const initialValue = storage.getItem(localStorageKey);
|
|
|
|
let value = isValidMode(initialValue) ? initialValue : defaultValue;
|
|
|
|
const { subscribe, set: _set } = writable(value, () => {
|
|
|
|
if (!isBrowser)
|
|
|
|
return;
|
|
|
|
const handler = (e) => {
|
|
|
|
if (e.key !== localStorageKey)
|
|
|
|
return;
|
|
|
|
const newValue = e.newValue;
|
|
|
|
if (isValidMode(newValue)) {
|
|
|
|
_set(value = newValue);
|
|
|
|
} else {
|
|
|
|
_set(value = defaultValue);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
addEventListener("storage", handler);
|
|
|
|
return () => removeEventListener("storage", handler);
|
|
|
|
});
|
|
|
|
function set(v) {
|
|
|
|
_set(value = v);
|
|
|
|
storage.setItem(localStorageKey, value);
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
subscribe,
|
|
|
|
set
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function createSystemMode() {
|
|
|
|
const defaultValue = void 0;
|
|
|
|
let track = true;
|
|
|
|
const { subscribe, set } = writable(defaultValue, () => {
|
|
|
|
if (!isBrowser)
|
|
|
|
return;
|
|
|
|
const handler = (e) => {
|
|
|
|
if (!track)
|
|
|
|
return;
|
|
|
|
set(e.matches ? "light" : "dark");
|
|
|
|
};
|
|
|
|
const mediaQueryState = window.matchMedia("(prefers-color-scheme: light)");
|
|
|
|
mediaQueryState.addEventListener("change", handler);
|
|
|
|
return () => mediaQueryState.removeEventListener("change", handler);
|
|
|
|
});
|
|
|
|
function query() {
|
|
|
|
if (!isBrowser)
|
|
|
|
return;
|
|
|
|
const mediaQueryState = window.matchMedia("(prefers-color-scheme: light)");
|
|
|
|
set(mediaQueryState.matches ? "light" : "dark");
|
|
|
|
}
|
|
|
|
function tracking(active) {
|
|
|
|
track = active;
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
subscribe,
|
|
|
|
query,
|
|
|
|
tracking
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function createDerivedMode() {
|
|
|
|
const { subscribe } = derived([userPrefersMode, systemPrefersMode, themeColors, disableTransitions], ([$userPrefersMode, $systemPrefersMode, $themeColors, $disableTransitions]) => {
|
|
|
|
if (!isBrowser)
|
|
|
|
return void 0;
|
|
|
|
const derivedMode2 = $userPrefersMode === "system" ? $systemPrefersMode : $userPrefersMode;
|
|
|
|
function update() {
|
|
|
|
const htmlEl = document.documentElement;
|
|
|
|
const themeColorEl = document.querySelector('meta[name="theme-color"]');
|
|
|
|
if (derivedMode2 === "light") {
|
|
|
|
htmlEl.classList.remove("dark");
|
|
|
|
htmlEl.style.colorScheme = "light";
|
|
|
|
if (themeColorEl && $themeColors) {
|
|
|
|
themeColorEl.setAttribute("content", $themeColors.light);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
htmlEl.classList.add("dark");
|
|
|
|
htmlEl.style.colorScheme = "dark";
|
|
|
|
if (themeColorEl && $themeColors) {
|
|
|
|
themeColorEl.setAttribute("content", $themeColors.dark);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if ($disableTransitions) {
|
|
|
|
withoutTransition(update);
|
|
|
|
} else {
|
|
|
|
update();
|
|
|
|
}
|
|
|
|
return derivedMode2;
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
subscribe
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function isValidMode(value) {
|
|
|
|
if (typeof value !== "string")
|
|
|
|
return false;
|
|
|
|
return modes.includes(value);
|
|
|
|
}
|
|
|
|
function setInitialMode(defaultMode, themeColors2) {
|
|
|
|
const rootEl = document.documentElement;
|
|
|
|
const mode = localStorage.getItem("mode-watcher-mode") || defaultMode;
|
|
|
|
const light = mode === "light" || mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches;
|
|
|
|
rootEl.classList[light ? "remove" : "add"]("dark");
|
|
|
|
rootEl.style.colorScheme = light ? "light" : "dark";
|
|
|
|
if (themeColors2) {
|
|
|
|
const themeMetaEl = document.querySelector('meta[name="theme-color"]');
|
|
|
|
if (themeMetaEl) {
|
|
|
|
themeMetaEl.setAttribute("content", mode === "light" ? themeColors2.light : themeColors2.dark);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
localStorage.setItem("mode-watcher-mode", mode);
|
|
|
|
}
|
|
|
|
const Mode_watcher = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
|
|
let { track = true } = $$props;
|
|
|
|
let { defaultMode = "system" } = $$props;
|
|
|
|
let { themeColors: themeColors$1 = void 0 } = $$props;
|
|
|
|
let { disableTransitions: disableTransitions$1 = true } = $$props;
|
|
|
|
themeColors.set(themeColors$1);
|
|
|
|
disableTransitions.set(disableTransitions$1);
|
|
|
|
const args = `"${defaultMode}"${themeColors$1 ? `, ${JSON.stringify(themeColors$1)}` : ""}`;
|
|
|
|
if ($$props.track === void 0 && $$bindings.track && track !== void 0)
|
|
|
|
$$bindings.track(track);
|
|
|
|
if ($$props.defaultMode === void 0 && $$bindings.defaultMode && defaultMode !== void 0)
|
|
|
|
$$bindings.defaultMode(defaultMode);
|
|
|
|
if ($$props.themeColors === void 0 && $$bindings.themeColors && themeColors$1 !== void 0)
|
|
|
|
$$bindings.themeColors(themeColors$1);
|
|
|
|
if ($$props.disableTransitions === void 0 && $$bindings.disableTransitions && disableTransitions$1 !== void 0)
|
|
|
|
$$bindings.disableTransitions(disableTransitions$1);
|
|
|
|
return `${$$result.head += `<!-- HEAD_svelte-cpyj77_START -->${themeColors$1 ? ` <meta name="theme-color"${add_attribute("content", themeColors$1.dark, 0)}>` : ``}<!-- HTML_TAG_START -->${`<script nonce="%sveltekit.nonce%">(` + setInitialMode.toString() + `)(` + args + `);<\/script>`}<!-- HTML_TAG_END --><!-- HEAD_svelte-cpyj77_END -->`, ""}`;
|
|
|
|
});
|
|
|
|
|
|
|
|
export { Mode_watcher as M, derivedMode as d };
|
2024-06-23 09:25:48 +00:00
|
|
|
//# sourceMappingURL=mode-watcher-CR12JZYP.js.map
|