ThemeToggle

Implemented

Light/dark theme toggle button. Persists choice to localStorage (key per app) and swaps the html class. aria-pressed reflects the current theme.

Categoryatoms

Sourcecomponents/atoms/ThemeToggle/ThemeToggle.tsx

AI HintLight/dark switcher — theme + onToggle(next) with aria-pressed reflecting dark (switch semantics). 44x44 card-surface button, DS-standard focus ring; the glyph is decorative and the accessible name comes from ariaLabel.

ThemeToggle component.

ThemeToggle

design-system

ThemeToggle component preview and API reference.

Usage

Import

tsxSnippet

import { ThemeToggle } from "@epasslive/design-system"

Example 1

tsxSnippet

<ThemeToggle />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms