Skip to content
fulldev/ui
X GitHub

Mode Toggle

---
import { ModeToggle } from "@/components/ui/mode-toggle"
---


<ModeToggle />

Installation

Section titled “Installation”

To install the mode toggle component, run the following command:

Terminal window
pnpm dlx shadcn@latest add @fulldev-ui/mode-toggle

Usage

Section titled “Usage”
import { ModeToggle } from "@/components/ui/mode-toggle"
<ModeToggle />

Features

Section titled “Features”
  • Automatically detects system preference
  • Persists user preference in localStorage
  • Smooth transitions between themes
  • Accessible with proper aria labels

How it works

Section titled “How it works”

The ModeToggle component:

  1. Detects the user’s system theme preference on first load
  2. Applies the dark class to the <html> element when dark mode is active
  3. Saves the user’s preference to localStorage
  4. Listens for clicks to toggle between light and dark modes
  5. Ensures smooth transitions without jarring flashes

The component is intentionally self-contained with inline scripts to avoid flash of unstyled content (FOUC) when the page loads.