Tailwind dark mode hook
import { useEffect, useState } from 'react';
const STORAGE_KEY = 'darkModeEnabled';
const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
export function useDarkMode(darkModeState = false) {
const [darkModeEnabled, setDarkModeEnabled] = useState(darkModeState);
const [htmlClassList, setHtmlClassList] = useState<DOMTokenList | undefined>(
undefined
);
/**
* On load, apply the current theme if found in local storage
*/
useEffect(() => {
const existingPreference = localStorage.getItem(STORAGE_KEY);
const htmlTag = document.getElementsByTagName('html');
const classList = htmlTag[0].classList;
if (existingPreference === DARK_MODE) {
classList.add(DARK_MODE);
localStorage.setItem(STORAGE_KEY, DARK_MODE);
setDarkModeEnabled(true);
} else {
classList.remove(DARK_MODE);
localStorage.setItem(STORAGE_KEY, LIGHT_MODE);
setDarkModeEnabled(false);
}
setHtmlClassList(classList);
}, [setDarkModeEnabled]);
/**
* On toggle, update the local storage preference
*/
useEffect(() => {
if (darkModeEnabled) {
htmlClassList?.add(DARK_MODE);
localStorage.setItem(STORAGE_KEY, DARK_MODE);
} else {
htmlClassList?.remove(DARK_MODE);
localStorage.setItem(STORAGE_KEY, LIGHT_MODE);
}
}, [darkModeEnabled, htmlClassList]);
return {
enabled: darkModeEnabled,
toggleDarkMode: () => setDarkModeEnabled(!darkModeEnabled),
};
}