@darwish/hooks-core/esm/useDarkMode.js

import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
import useLocalStorage from "./useLocalStorage";
import useMediaQuery from "./useMediaQuery";
var COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
var LOCAL_STORAGE_KEY = "usehooks-ts-dark-mode";
/**
 * Custom hook that returns the current state of the dark mode.
 * @param {?DarkModeOptions} [options] - The initial value of the dark mode, default `false`.
 * @returns {DarkModeReturn} An object containing the dark mode's state and its controllers.
 * @public
 * @example
 * ```tsx
 * const { isDarkMode, toggle, enable, disable, set } = useDarkMode({ defaultValue: true });
 * ```
 */
export default function useDarkMode(options) {
    var _a;
    if (options === void 0) { options = {}; }
    var defaultValue = options.defaultValue, _b = options.localStorageKey, localStorageKey = _b === void 0 ? LOCAL_STORAGE_KEY : _b, _c = options.initializeWithValue, initializeWithValue = _c === void 0 ? true : _c;
    var isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, {
        initializeWithValue: initializeWithValue,
        defaultValue: defaultValue,
    });
    var _d = useLocalStorage(localStorageKey, (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : isDarkOS) !== null && _a !== void 0 ? _a : false), isDarkMode = _d[0], setDarkMode = _d[1];
    // Update darkMode if os prefers changes
    useIsomorphicLayoutEffect(function () {
        if (isDarkOS !== isDarkMode) {
            setDarkMode(isDarkOS);
        }
    }, [isDarkOS]);
    return {
        isDarkMode: isDarkMode,
        toggle: function () {
            setDarkMode(function (prev) { return !prev; });
        },
        enable: function () {
            setDarkMode(true);
        },
        disable: function () {
            setDarkMode(false);
        },
        set: function (value) {
            setDarkMode(value);
        },
    };
}