ThemeToggle

Light/dark switch or 3-way group

The control for dark mode. Default is a single button — "Dark theme", aria-pressed when it's on — for a nav bar; mode="group" is light / system / dark as a toggle group, for a settings page. The switch can only ever set light or dark, so once pressed it leaves system behind; offer the group where you want the OS to stay in charge. labels translates the names ({ light, system, dark }; the switch reads dark).

Its pressed state depends on the OS preference, which the server can't know, so it renders unpressed until mounted and server and client markup agree. To avoid the one-frame default before a saved theme applies, add the head script from the guide.

Basic

<script setup lang="ts">
import { BlessThemeToggle } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessThemeToggle />
    <BlessThemeToggle mode="group" />
  </div>
</template>

Usage

import { BlessThemeToggle } from "blessing-ui";

API

Props

Name	Type	Default	Description
mode	"switch" | "group"	"switch"	three-way (light/system/dark) or a single light↔dark button
label	string	"Theme"	the group's name
labels	{ light?: string | undefined; system?: string | undefined; dark?: string | undefined; }	{}	accessible names: the switch reads `dark` with pressed / not pressed; the group reads all three