VeanUI
v0.51.3
Components
Back to catalog
Component detail entry
Utilities
@vean/ui
SThemeModeSwitch

ThemeModeSwitch

ThemeModeSwitch belongs to the Utilities category. Start with demos and usage, then use the API tables to finish integration and styling decisions.

Use the quick jump panel to reach overview, usage, demos, and API first, then continue through the full page.

Quick jump

OverviewUsageDemosAPI

Related components

If you are composing interactions in the same family, these components usually pair well together.

ThemeBaseSelectThemeCustomizerThemeModeSegmentThemeModeSelectThemePrimarySelectVisuallyHidden

ThemeModeSwitch

Overview

SThemeModeSwitch is a context-bound toggle bound to the active SConfigProvider theme. It reflects the current effective scheme (so an auto preference shows the OS-resolved light/dark state) and pins an explicit light / dark preference when toggled. Use it as a quick, compact light/dark switch in a header or toolbar.

Usage

Features

  • 🌓 Reflects the effective scheme — with auto, the thumb tracks the OS prefers-color-scheme
  • 🎚 Pins an explicit preference on toggle, overriding any auto resolution
  • 🎨 Inherits size and color from the theme, with a sun/moon icon by default
  • ♿ Forwards an accessible label to the role="switch" control (axe-clean)
  • 🧩 showIcon toggles the sun/moon glyph

Demos

Basic

Light / Dark

API

Aria Layer

1

ThemeModeSwitch

4 Props
Props
PropTypeDefaultDescription
size
ThemeSize
'md'
Visual size of the switch.
color
ThemeColor
'accent'
Theme color of the switch track.
showIcon
boolean
true
Whether to render a sun/moon icon inside the switch thumb.
aria-label
string
'Toggle color scheme'
Accessible label for the switch control.

Notes

Scope

SThemeModeSwitch is a theme-layer component that operates directly on the theme context from a parent SConfigProvider. It does not accept a modelValue; state is owned by the provider and shared across all theme components. To select auto (which a binary switch cannot express), pair it with SThemeModeSelect.

Cautions

  • The component must be rendered inside a SConfigProvider that provides the theme context, otherwise useTheme throws.
  • Toggling a switch that is currently following auto pins an explicit light / dark preference; use SThemeModeSelect to return to auto.