ThemeToggle

molecules

Moon-icon IconButton that toggles data-theme between 'light' and 'dark' on documentElement. Persists to localStorage. aria-pressed reflects state.

ARIA Role: button

Demo

Demo for ThemeToggle (molecules)

Moon-icon IconButton that toggles data-theme between 'light' and 'dark' on documentElement. Persists to localStorage. aria-pressed reflects state.

Props

PropTypeRequiredDefaultDescription
pressedbooleanYes—
onToggle() => voidYes—

TypeScript Interface

interface ThemeToggleProps {
  pressed?: boolean;
  onToggle: () => void;
  ariaLabel?: string;
}

Assertions (NASA Rule 5)

  • [type]onToggle required(NASA Rule 5)
  • [aria]aria-pressed must reflect theme state; aria-label must NOT change with state (would confuse SR)(WCAG 4.1.2)

Usage

Import

import { Themetoggle } from '@epasslive/design-system'

Basic

<Themetoggle />

With Variants

<Themetoggle variant="primary" size="md" />