File size: 2,765 Bytes
04ec17f |
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 |
import { userPrefersMode } from "./mode-states.svelte.js";
import { customTheme } from "./theme-state.svelte.js";
import { derivedMode } from "./states.svelte.js";
/** Toggle between light and dark mode */
export function toggleMode() {
userPrefersMode.current = derivedMode.current === "dark" ? "light" : "dark";
}
/** Set the mode to light or dark */
export function setMode(mode) {
userPrefersMode.current = mode;
}
/** Reset the mode to operating system preference */
export function resetMode() {
userPrefersMode.current = "system";
}
/** Set the theme to a custom value */
export function setTheme(newTheme) {
customTheme.current = newTheme;
}
export function defineConfig(config) {
return config;
}
/** Used to set the mode on initial page load to prevent FOUC */
export function setInitialMode({ defaultMode = "system", themeColors, darkClassNames = ["dark"], lightClassNames = [], defaultTheme = "", modeStorageKey = "mode-watcher-mode", themeStorageKey = "mode-watcher-theme", }) {
const rootEl = document.documentElement;
const mode = localStorage.getItem(modeStorageKey) ?? defaultMode;
const theme = localStorage.getItem(themeStorageKey) ?? defaultTheme;
const light = mode === "light" ||
(mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches);
if (light) {
if (darkClassNames.length)
rootEl.classList.remove(...darkClassNames.filter(Boolean));
if (lightClassNames.length)
rootEl.classList.add(...lightClassNames.filter(Boolean));
}
else {
if (lightClassNames.length)
rootEl.classList.remove(...lightClassNames.filter(Boolean));
if (darkClassNames.length)
rootEl.classList.add(...darkClassNames.filter(Boolean));
}
rootEl.style.colorScheme = light ? "light" : "dark";
if (themeColors) {
const themeMetaEl = document.querySelector('meta[name="theme-color"]');
if (themeMetaEl) {
themeMetaEl.setAttribute("content", mode === "light" ? themeColors.light : themeColors.dark);
}
}
if (theme) {
rootEl.setAttribute("data-theme", theme);
localStorage.setItem(themeStorageKey, theme);
}
localStorage.setItem(modeStorageKey, mode);
}
/**
* A type-safe way to generate the source expression used to set the initial mode and avoid FOUC.
*/
export function createInitialModeExpression(config = {}) {
return `(${setInitialMode.toString()})(${JSON.stringify(config)});`;
}
/**
* A type-safe way to generate the source expression used to set the initial mode and avoid FOUC.
*
* @deprecated Use `createInitialModeExpression` instead.
*/
export const generateSetInitialModeExpression = createInitialModeExpression;
|