Skip to content
usefy

useDarkMode

Browser & device

Dark mode with system detection, persistence, and DOM application

Install

$ npm install @usefy/use-dark-mode

Quick start

useDarkMode.tsx
import { useDarkMode } from "@usefy/use-dark-mode";

const { isDark, toggle } = useDarkMode();
<button onClick={toggle}>{isDark ? "🌙" : "☀️"}</button>;

API reference

useDarkMode(options?): { mode, isDark, setMode, toggle, enable, disable }mode is "system" | "light" | "dark". Options: defaultMode ("system"), storageKey ("usefy-dark-mode"), element (<html>), attribute (write an attribute instead of a class), darkClass ("dark").

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

More in browser & device