ThemeToggle

Theme

Theme switcher component with light/dark/system modes and persistent storage

Basic Usage

Icon Variant

Custom Styling

Usage Guidelines

When to Use

  • Theme switching
  • User preferences
  • Header actions

Accessibility

  • Current mode announced
  • Keyboard toggle

Performance

  • Single state update
  • Efficient icon swap

Common Mistakes

  • No system theme option
  • Not persisting preference

Frequently Asked Questions

ThemeToggle supports light, dark, and system modes with persistent storage.
Yes, ThemeToggle icon reflects the current theme mode.

View on GitHub

See the full source code on GitHub

Related Components

View all
ThemeProvider

Context provider for theme management with dark mode, color scheme switching, and CSS variable injection

Previous

Tabs

Next

Tooltip