General

ThemeModeButton

A button that toggles between light and dark mode. Automatically manages theme state via mode-watcher with customizable icons and styling.

Playground

Variant

Size

Color

Basic Usage

Drop in anywhere. Works out of the box with mode-watcher.

<script lang="ts">
  import { ThemeModeButton } from 'sv5ui';
</script>

<ThemeModeButton />

Variants

ghost

outline

soft

subtle

solid

<ThemeModeButton variant="ghost" />
<ThemeModeButton variant="outline" />
<ThemeModeButton variant="soft" />
<ThemeModeButton variant="subtle" />
<ThemeModeButton variant="solid" />

Sizes

<ThemeModeButton size="xs" />
<ThemeModeButton size="sm" />
<ThemeModeButton size="md" />
<ThemeModeButton size="lg" />
<ThemeModeButton size="xl" />

Colors

<ThemeModeButton color="surface" />
<ThemeModeButton color="primary" />
<ThemeModeButton color="secondary" />
<ThemeModeButton color="success" />
<ThemeModeButton color="warning" />
<ThemeModeButton color="error" />
<ThemeModeButton color="info" />

Custom Icons

Override the default sun/moon icons.

<!-- Custom icon set -->
<ThemeModeButton
  lightIcon="lucide:sunrise"
  darkIcon="lucide:sunset"
/>

<!-- Different icon collections -->
<ThemeModeButton
  lightIcon="mdi:white-balance-sunny"
  darkIcon="mdi:weather-night"
/>

Custom Content

Use children snippet with isDark for fully custom content.

<ThemeModeButton>
  {#snippet children({ isDark })}
    {isDark ? '🌙' : '☀️'}
  {/snippet}
</ThemeModeButton>

Styled Examples

Navbar

Accent

Minimal

<!-- Outline style for navbars -->
<ThemeModeButton variant="outline" color="surface" />

<!-- Solid accent button -->
<ThemeModeButton variant="solid" color="primary" />

<!-- Subtle minimal style -->
<ThemeModeButton variant="subtle" color="surface" size="sm" />

UI Slots

Slot	Description
`base`	`Root button element — controls layout, colors, transitions`
`icon`	`Icon element — controls icon sizing and shrink behavior`

Snippets

Snippet	Props	Description
`children`	`isDark: boolean`	`Custom content replacing default icon, receives current theme state`

Props

Prop	Type	Default	Description
`variant`	`'solid'\|'outline'\|'soft'\|'subtle'\|'ghost'\|'link'`	`'ghost'`	`Button visual style`
`color`	`ColorType`	`'surface'`	`Color scheme`
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`	`Button size`
`lightIcon`	`string`	`'lucide:sun'`	`Icon in light mode`
`darkIcon`	`string`	`'lucide:moon'`	`Icon in dark mode`
`loading`	`boolean`	`false`	`Show loading spinner`
`disabled`	`boolean`	`false`	`Disable button`
`square`	`boolean`	`true`	`Equal width and height`
`block`	`boolean`	`false`	`Full width`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Kbd Card