Mode Switcher

A single button that cycles the theme through light, dark, and system, persisted in localStorage.

bun x bosia@latest add mode-switcher

A ghost icon button that cycles the color theme through light → dark → system on each click. The choice is saved to localStorage under the theme key and re-applied on load, so it survives a page refresh. While in system mode it also follows live OS theme changes. The navbar uses this component internally.

Preview

Click to cycle light → dark → system

Props

Prop	Type	Default
`class`	`string`	`""`

Usage

<script lang="ts">
	import { ModeSwitcher } from "$lib/components/ui/mode-switcher";
</script>

<ModeSwitcher />