Mode Toggle

Cycles light, dark, and system theme modes and persists the choice.

Cycles light, dark, and system.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/mode-toggle.json

Usage

A client button that cycles light → dark → auto (system preference), writes theme to localStorage, and updates document.documentElement classes and color-scheme.

import { ModeToggle } from "@/lib/mode-toggle";

<header className="flex justify-end p-4">
  <ModeToggle />
</header>

Icons switch to Sun, Moon, or Monitor based on the current mode. Pass className to restyle the control. Store key is theme with values light, dark, or auto.