@supunlakmal/hooks
Version:
A collection of reusable React hooks
46 lines • 2.09 kB
JavaScript
import { useEffect } from 'react';
import { useLocalStorage } from './useLocalStorage'; // Use our existing hook
import { useMediaQuery } from '../user-interface-dom/useMediaQuery'; // Use our existing hook
const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)';
const LOCAL_STORAGE_KEY = 'usehooks-ts-dark-mode';
/**
* Custom hook to manage dark mode state.
* It synchronizes with the user's OS preference and persists the choice in local storage.
*
* @param {boolean} [defaultValue] - Optional initial value (overrides OS preference and local storage).
* @returns {UseDarkModeOutput} An object containing the dark mode state and control functions.
*/
export const useDarkMode = (defaultValue) => {
// Get system preference
const isSystemDark = useMediaQuery(COLOR_SCHEME_QUERY);
// Use local storage to override system preference
const [isDarkModeStored, setDarkModeStored] = useLocalStorage(LOCAL_STORAGE_KEY, defaultValue !== null && defaultValue !== void 0 ? defaultValue : isSystemDark // Default to defaultValue, then system, then false implicitly by useLocalStorage
);
// Determine the current state (respecting storage override)
const isDarkMode = isDarkModeStored !== null && isDarkModeStored !== void 0 ? isDarkModeStored : isSystemDark;
// Apply the theme class to the body or html element
useEffect(() => {
const element = window.document.documentElement; // Use <html> element
if (isDarkMode) {
element.classList.add('dark');
element.classList.remove('light');
}
else {
element.classList.add('light');
element.classList.remove('dark');
}
}, [isDarkMode]);
// Control functions
const toggle = () => setDarkModeStored((prev) => !prev);
const enable = () => setDarkModeStored(true);
const disable = () => setDarkModeStored(false);
const set = (value) => setDarkModeStored(value);
return {
isDarkMode,
toggle,
enable,
disable,
set,
};
};
//# sourceMappingURL=useDarkMode.js.map