@ducor/react/dist/provider/theme.js

admin template ui interface

import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useContext, useState, useEffect, } from "react";
export var ThemeContext = createContext(undefined);
export var useTheme = function () {
    var context = useContext(ThemeContext);
    if (!context) {
        throw new Error("useTheme must be used within a ThemeProvider");
    }
    return context;
};
var ThemeProvider = function (_a) {
    var children = _a.children;
    var getInitialThemeMode = function () {
        var mode = window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light";
        return mode;
    };
    var _b = useState(getInitialThemeMode()), themeMode = _b[0], setThemeModeState = _b[1];
    var _c = useState(themeMode === "dark"), isDark = _c[0], setIsDark = _c[1];
    useEffect(function () {
        var handleThemeChange = function (e) {
            if (themeMode === "system") {
                setIsDark(e.matches);
            }
        };
        var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
        mediaQuery.addEventListener("change", handleThemeChange);
        return function () {
            mediaQuery.removeEventListener("change", handleThemeChange);
        };
    }, [themeMode]);
    var setThemeMode = function (mode) {
        setThemeModeState(mode);
        if (mode === "system") {
            setIsDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
        }
        else {
            setIsDark(mode === "dark");
        }
    };
    var toggleThemeMode = function () {
        setThemeMode(themeMode === "dark" ? "light" : "dark");
    };
    useEffect(function () {
        if (isDark) {
            document.documentElement.classList.add("dark");
        }
        else {
            document.documentElement.classList.remove("dark");
        }
    }, [isDark]);
    return (_jsx(ThemeContext.Provider, { value: { themeMode: themeMode, setThemeMode: setThemeMode, toggleThemeMode: toggleThemeMode, isDark: isDark }, children: children }));
};
export default ThemeProvider;