@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 const ThemeContext = createContext(undefined);
export const useTheme = () => {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error("useTheme must be used within a ThemeProvider");
    }
    return context;
};
const ThemeProvider = ({ children }) => {
    const getInitialThemeMode = () => {
        const mode = window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light";
        return mode;
    };
    const [themeMode, setThemeModeState] = useState(getInitialThemeMode());
    const [isDark, setIsDark] = useState(themeMode === "dark");
    useEffect(() => {
        const handleThemeChange = (e) => {
            if (themeMode === "system") {
                setIsDark(e.matches);
            }
        };
        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
        mediaQuery.addEventListener("change", handleThemeChange);
        return () => {
            mediaQuery.removeEventListener("change", handleThemeChange);
        };
    }, [themeMode]);
    const setThemeMode = (mode) => {
        setThemeModeState(mode);
        if (mode === "system") {
            setIsDark(window.matchMedia("(prefers-color-scheme: dark)").matches);
        }
        else {
            setIsDark(mode === "dark");
        }
    };
    const toggleThemeMode = () => {
        setThemeMode(themeMode === "dark" ? "light" : "dark");
    };
    useEffect(() => {
        if (isDark) {
            document.documentElement.classList.add("dark");
            // document.documentElement.classList.remove("light");
        }
        else {
            // document.documentElement.classList.add("light");
            document.documentElement.classList.remove("dark");
        }
    }, [isDark]);
    return (_jsx(ThemeContext.Provider, { value: { themeMode, setThemeMode, toggleThemeMode, isDark }, children: children }));
};
export default ThemeProvider;