@usefy/use-dark-mode
v0.25.1
Published
A React hook for dark mode with system detection, persistence, and DOM class/attribute
Maintainers
mirunamuReadme
Overview
useDarkMode is part of the @usefy ecosystem — a collection of production-ready, TypeScript-first, SSR-safe React hooks. Dark mode with system detection, persistence, and DOM application.
Features
- Three modes —
systemfollows the OS;light/darkoverride - Persisted + synced — saved to
localStorage, kept in sync across tabs - DOM application — toggles a class or writes an attribute for you
- TypeScript-first — full type inference and exported types
- Tiny & tree-shakeable — zero dependencies, published as its own package
Installation
# npm
npm install @usefy/use-dark-mode
# yarn
yarn add @usefy/use-dark-mode
# pnpm
pnpm add @usefy/use-dark-modeRequires React 18 or 19 (peerDependencies: "react": "^18.0.0 || ^19.0.0").
Quick Start
import { useDarkMode } from "@usefy/use-dark-mode";
const { isDark, toggle } = useDarkMode();
<button onClick={toggle}>{isDark ? "🌙" : "☀️"}</button>;API
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").
Testing
📊 View Detailed Coverage Report (GitHub Pages) — 21 tests, 94.8% statement coverage.
License
MIT © mirunamu
This package is part of the usefy monorepo.