Mode Switch
A toggle component specifically designed for switching between light and dark themes.
Component Source
View the source code for the mode-switch component.
$lib/components/shared/theme-switch/modeSwitch.svelteInstallation
npx nnuikit add theme-switch
import { ModeSwitch } from "$lib/components/ui/theme-switch";Quick Start
<ModeSwitch />Interactive Playground
Toggle theme states and adjust switch sizes.
Current Mode: Light
<ModeSwitch />Size
Sizes
Available size variations.
Small
<ModeSwitch size="sm" />Medium
<ModeSwitch size="md" />Large
<ModeSwitch size="lg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
isDark | boolean | false | The bindable theme state. Controls the dark mode class on document root. |
size | "sm" | "md" | "lg" | "lg" | The size variation of the switch. |
class | string | undefined | Additional CSS classes to apply to the button container. |