Component primitive

Brand Theme Toggle

<brand-theme-toggle> replaces theme dropdowns with one accessible button. It can own data-theme and storage directly, or run controlled by an app theme provider.

<brand-theme-toggle>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-theme-toggle>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Light and dark

Light, dark, and system

Multi-theme dropdown

Use <brand-theme-select> when an app offers named themes beyond light and dark. It opens a menu with one radio item per theme; the toggle stays reserved for mode-only cycling. With data-modes, the active theme row embeds a light/dark mode switch, the meritOS pattern.

Controlled usage

import '@brandos/ui/components/brand-theme-toggle';

<brand-theme-toggle
  data-value="light"
  data-values="light,dark,system"
  data-managed="false"
></brand-theme-toggle>

document.querySelector('brand-theme-toggle')
  ?.addEventListener('brand-theme-change', (event) => setMode(event.detail.value));