# useDarkMode > Dark-mode boolean with toggle. - Category: State - Package: `hookli` (install with `npm i hookli`) - Docs: https://hookli.vercel.app/docs/use-dark-mode ## Signature ```ts useDarkMode(): { isDarkMode: boolean; toggleDarkMode: () => void } ``` ## Returns - `isDarkMode`: `boolean` — Current mode. Initialized from localStorage("theme") on the client; false during SSR. - `toggleDarkMode`: `() => void` — Flips the mode. An effect persists it to localStorage("theme") and toggles a "dark" class on . ## Usage ```tsx import { useDarkMode } from "hookli"; export function Demo() { const { isDarkMode, toggleDarkMode } = useDarkMode(); return (

); } ``` ## Source `src/hooks/useDarkMode.hook.ts` ```ts import { useEffect, useState } from "react"; interface UseDarkModeState { isDarkMode: boolean; toggleDarkMode: () => void; } export const useDarkMode = (): UseDarkModeState => { const [isDarkMode, setIsDarkMode] = useState(() => { if (typeof window === "undefined") return false; return window.localStorage.getItem("theme") === "dark"; }); const toggleDarkMode = () => setIsDarkMode((prevMode) => !prevMode); useEffect(() => { if (typeof document === "undefined") return; const bodyElement = document.body; const darkClass = "dark"; bodyElement.classList.toggle(darkClass, isDarkMode); window.localStorage.setItem("theme", isDarkMode ? "dark" : "light"); return () => { bodyElement.classList.remove(darkClass); }; }, [isDarkMode]); return { isDarkMode, toggleDarkMode }; }; ```