StorybookGitHub

Theme Toggle

Switches between branded data-theme palettes and persists the choice.

Pick a brand palette via data-theme.

Installation

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

Usage

Switches document.documentElement data-theme among theme-primary, theme-secondary, and theme-tertiary. Values are stored in localStorage under data-theme.

import { ThemeToggle } from "@/lib/theme-toggle";

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

Define CSS for each brand palette on the root:

:root[data-theme="theme-primary"] {
  /* primary brand tokens */
}

:root[data-theme="theme-secondary"] {
  /* secondary brand tokens */
}

:root[data-theme="theme-tertiary"] {
  /* tertiary brand tokens */
}

This is for brand palettes (not light/dark mode). Define the CSS as shown above, or follow Theming. For light/dark/system cycling, use mode-toggle.