Brunobkr/llama.cpp_AlgMor24_github

1import { box } from "svelte-toolbelt";2import { isBrowser, sanitizeClassNames } from "./utils.js";3import { withoutTransition } from "./without-transition.js";4import { systemPrefersMode, userPrefersMode } from "./mode-states.svelte.js";5import { customTheme } from "./theme-state.svelte.js";6import { untrack } from "svelte";7/**8 * Theme colors for light and dark modes.9 */10export const themeColors = box(undefined);11/**12 * Whether to disable transitions when changing the mode.13 */14export const disableTransitions = box(true);15/**16 * Whether to run the mode changes synchronously instead of using17 * an animation frame. If true, will have an impact on blocking performance18 * due to blocking the main thread.19 */20export const synchronousModeChanges = box(false);21/**22 * The classnames to add to the root `html` element when the mode is dark.23 */24export const darkClassNames = box([]);25/**26 * The classnames to add to the root `html` element when the mode is light.27 */28export const lightClassNames = box([]);29function createDerivedMode() {30    const current = $derived.by(() => {31        if (!isBrowser)32            return undefined;33        const derivedMode = userPrefersMode.current === "system"34            ? systemPrefersMode.current35            : userPrefersMode.current;36        const sanitizedDarkClassNames = sanitizeClassNames(darkClassNames.current);37        const sanitizedLightClassNames = sanitizeClassNames(lightClassNames.current);38        function update() {39            const htmlEl = document.documentElement;40            const themeColorEl = document.querySelector('meta[name="theme-color"]');41            if (derivedMode === "light") {42                if (sanitizedDarkClassNames.length)43                    htmlEl.classList.remove(...sanitizedDarkClassNames);44                if (sanitizedLightClassNames.length)45                    htmlEl.classList.add(...sanitizedLightClassNames);46                htmlEl.style.colorScheme = "light";47                if (themeColorEl && themeColors.current) {48                    themeColorEl.setAttribute("content", themeColors.current.light);49                }50            }51            else {52                if (sanitizedLightClassNames.length)53                    htmlEl.classList.remove(...sanitizedLightClassNames);54                if (sanitizedDarkClassNames.length)55                    htmlEl.classList.add(...sanitizedDarkClassNames);56                htmlEl.style.colorScheme = "dark";57                if (themeColorEl && themeColors.current) {58                    themeColorEl.setAttribute("content", themeColors.current.dark);59                }60            }61        }62        if (disableTransitions.current) {63            withoutTransition(update, synchronousModeChanges.current);64        }65        else {66            update();67        }68        return derivedMode;69    });70    return {71        get current() {72            return current;73        },74    };75}76function createDerivedTheme() {77    const current = $derived.by(() => {78        customTheme.current;79        if (!isBrowser)80            return undefined;81        function update() {82            const htmlEl = document.documentElement;83            htmlEl.setAttribute("data-theme", customTheme.current);84        }85        if (disableTransitions.current) {86            withoutTransition(update, untrack(() => synchronousModeChanges.current));87        }88        else {89            update();90        }91        return customTheme.current;92    });93    return {94        get current() {95            return current;96        },97    };98}99/**100 * Derived store that represents the current mode (`"dark"`, `"light"` or `undefined`)101 */102export const derivedMode = createDerivedMode();103/**104 * Derived store that represents the current custom theme105 */106export const derivedTheme = createDerivedTheme();107export { derivedMode as mode, derivedTheme as theme };108