Dowe

MULTI THEME

SelectTheme

SelectTheme turns the named themes from theme.dowe into one portable, persisted picker.

PLAYGROUND

Choose from all 17 configured themes

The options come from the complete themes example catalog. Do not author Option children or a binding for this component.

17-theme catalog

This app exposes Light, Dark, Palette 2, Palette 3, and Palette 5 through Palette 17 in their declared order.

Documentation theme

SelectTheme:
  label:"Documentation theme"
  placeholder:"Choose a theme"
  variant:"outlined"
  scheme:"surface"

CATALOG

Theme names stay in theme.dowe

Add, order, and extend themes in the root theme declaration. SelectTheme automatically receives every normalized name in that same order.

theme
  design defaultTheme:"light"
    theme name:"light"
    theme name:"palette-2" extends:"light"
    theme name:"palette-3" extends:"light"
    theme name:"dark"
    theme name:"palette-5" extends:"light"
    theme name:"palette-6" extends:"light"
    theme name:"palette-7" extends:"light"
    theme name:"palette-8" extends:"light"
    theme name:"palette-9" extends:"light"
    theme name:"palette-10" extends:"dark"
    theme name:"palette-11" extends:"light"
    theme name:"palette-12" extends:"dark"
    theme name:"palette-13" extends:"dark"
    theme name:"palette-14" extends:"light"
    theme name:"palette-15" extends:"light"
    theme name:"palette-16" extends:"dark"
    theme name:"palette-17" extends:"light"

DISPLAY

Readable labels

palette-2 is presented as Palette 2, while its persisted value stays palette-2.

FALLBACK

A safe default

An unavailable stored name falls back to design.defaultTheme before the view is shown.

SYNC

All controls agree

Selection updates every visible SelectTheme and ToggleTheme control through theme-preference without leaving the current page.

LAYOUT

Pair the picker with an action

Inside a direct Flex row with no explicit width, SelectTheme uses the remaining row width while adjacent actions keep their intrinsic size.

Theme

BEHAVIOR

One catalog, every target

SelectTheme reuses Select's field, popover, focus behavior, and accessibility surface; it adds only automatic options and the theme preference side effect.

NO CHILDREN

No manual options

Option children are rejected because the generated catalog is the single source of choices.

PERSISTENCE

Restore the chosen name

Web, Android, and iOS restore the selected name and apply its tokens immediately.

COMPANION

A compact companion

Use ToggleTheme for a compact light/dark action alongside the complete picker.

API

SelectTheme props

SelectTheme also accepts applicable common identity, spacing, sizing, visibility, radius, border, and shadow props. It does not accept children, Option nodes, or bind.

Prop	Type	Default
No data There are no records to display

No data