Theme Switch
Accessible toggles powered by the bundled ThemeToggleHook. Deliver effortless transitions between light and dark palettes with crisp visuals, icons, hints, and layout options.
Sizes & Defaults
Minimal toggles for dashboards, preferences, and settings drawers. Pick a size and add optional helper text for clarity.
Silent, space-friendly toggle.
Small footprint — perfect for dense tables or settings lists.
Inline labels keep context obvious.
Default size with inline labels for balanced readability.
Use stacked labels for hero placements.
Large and expressive — ideal for onboarding screens or marketing pages.
No labels, just the toggle.
Default configuration without labels for quick theme access.
<.theme_switch size={:sm} hint="Compact toggle" />
<.theme_switch size={:md} show_label hint="Inline labels" />
<.theme_switch size={:lg} show_label label_position={:stacked} hint="Stacked labels" />
Visual Variants
Swap styles to echo your brand language: solid, glassmorphism, gradient, outline, or pill.
Icon Styles & Accessibility
Pick iconography that fits your voice: hero icons, minimal dots, or playful emoji — all while keeping ARIA-friendly semantics.
Dual icons
Hero icons indicate the active palette.
Minimal dots
Subtle treatment for dense toolbars.
Emoji
Perfect for playful apps and marketing sites.
<.theme_switch variant={:gradient} icon_style={:dual} />
<.theme_switch variant={:outline} icon_style={:minimal} hint="Subtle toggle" />
<.theme_switch variant={:glass} icon_style={:emoji} show_label label_position={:stacked} />