@darwish/hooks-core
Version:
53 lines (52 loc) • 2.25 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var useIsomorphicLayoutEffect_1 = __importDefault(require("./useIsomorphicLayoutEffect"));
var useLocalStorage_1 = __importDefault(require("./useLocalStorage"));
var useMediaQuery_1 = __importDefault(require("./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 });
* ```
*/
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 = (0, useMediaQuery_1.default)(COLOR_SCHEME_QUERY, {
initializeWithValue: initializeWithValue,
defaultValue: defaultValue,
});
var _d = (0, useLocalStorage_1.default)(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
(0, useIsomorphicLayoutEffect_1.default)(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);
},
};
}
exports.default = useDarkMode;