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

ThemeModeSelect

ThemeModeSelect 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.

ThemeBaseSelectThemeCustomizerThemeModeSegmentThemeModeSwitchThemePrimarySelectVisuallyHidden

ThemeModeSelect

Overview

SThemeModeSelect is a context-bound dropdown bound to the active SConfigProvider theme. It exposes the three ThemeModePreference options — auto (follows the OS prefers-color-scheme), light, and dark — each with a scheme icon, letting users pick a color scheme preference directly.

Usage

Features

  • 🌓 Three options — auto / light / dark, matching the theme mode type
  • 🎚 Selection writes the preference through the shared theme context
  • 🎨 Inherits size from the theme, with per-option scheme icons by default
  • 🧩 showIcon toggles the monitor / sun / moon glyphs in the trigger and options

Demos

Basic

API

Aria Layer

1

ThemeModeSelect

2 Props
Props
PropTypeDefaultDescription
size
ThemeSize
'md'
Visual size of the select trigger.
showIcon
boolean
true
Whether to render a scheme icon (monitor / sun / moon) in the trigger and each option.

Notes

Scope

Like SThemeModeSwitch, SThemeModeSelect is a theme-layer component that operates on the theme context from a parent SConfigProvider. It does not accept a modelValue; the preference is owned by the provider and shared across all theme components.

Cautions

  • The component must be rendered inside a SConfigProvider, otherwise useTheme throws.
  • auto is a preference — the resolved scheme (light / dark) still depends on the OS prefers-color-scheme and is exposed as effectiveMode on the theme context.