General

ThemeModeButton

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

Playground

Experiment with different props in real-time.

Variant

Size

Color

Basic Usage

Drop in anywhere to add a theme toggle. It works out of the box with mode-watcher.

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

<ThemeModeButton />

Variants

All button variants are supported.

Ghost

Outline

Soft

Subtle

Solid

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

Sizes

Available in 5 sizes from XS to XL.

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

Colors

Customize the color scheme with the color prop.

<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 with any Iconify icon.

<!-- 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 the children snippet with isDark state for fully custom content.

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

Styled Examples

Common styling combinations for different use cases.

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

Use the ui prop to override classes on internal elements.

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

Snippets

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

Props

Prop	Type	Default
`variant`	`'solid' \| 'outline' \| 'soft' \| 'subtle' \| 'ghost' \| 'link'`	`'ghost'`
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'surface'`	`'surface'`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`lightIcon`	`string`	`'lucide:sun'`
`darkIcon`	`string`	`'lucide:moon'`
`loading`	`boolean`	`false`
`disabled`	`boolean`	`false`
`square`	`boolean`	`true`
`block`	`boolean`	`false`
`class`	`string`	`-`
`ui`	`Record<Slot, Class>`	`-`

Kbd Card