🎭 Theming

TH01 · Built-in Color Scheme — auto / light / dark

Every picker ships dark-ready — --ms-* colors are wrapped in light-dark(). Signal the scheme; the component picks the branch.

Every picker ships dark-ready: all --ms-* color defaults are wrapped in CSS light-dark(), keyed on the host's color-scheme. You never override --base-* to go dark (that's what the theme cards further down do, for custom palettes) — you just signal the scheme and the component picks the right branch. Three ways, in priority order:

• Per-instance — data-theme="dark" / "light" on the <web-multiselect> itself (highest priority; overrides any ancestor).
• Framework class on an ancestor — .dark (Tailwind), [data-bs-theme="dark"] (Bootstrap 5.3+), or [data-theme="dark"].
• Follow the OS — set no explicit signal and let the page opt into color-scheme: light dark; both the page and the picker track the system setting.

<!-- 1. Per-instance (wins over everything) -->
<.web_multiselect data-theme="dark" />

<!-- 2. Framework class on an ancestor -->
<html class="dark">                    <!-- Tailwind -->
<html data-bs-theme="dark">            <!-- Bootstrap 5.3+ -->
<div data-theme="dark"> … <.web_multiselect /> … </div>

<!-- 3. Follow the OS: opt the page into system switching -->
<style> html { color-scheme: light dark; } </style>
<.web_multiselect />   <!-- no signal → tracks prefers-color-scheme -->

// switch at runtime — it's just an attribute
picker.setAttribute('data-theme', 'dark');   // or 'light'
picker.removeAttribute('data-theme');        // back to inherit/OS

TH02 · Grouped options + fullscreen mode switch

Grouped options in the fullscreen overlay with the built-in filter↔navigate toggle — all following the same color scheme.

Everything at once: grouped options (allow_groups) rendered in the fullscreen overlay, with the built-in filter↔navigate toggle (show_search_mode_toggle) in the search header — all following the same built-in color scheme. Pick a scheme, tick Preview as fullscreen, open the picker, then tap the leading icon in the search bar (magnifier = navigate, funnel = filter). Group headers, matched rows, checkboxes, badges and the N of M match navigator all stay themed with zero per-instance color overrides.

<.web_multiselect
  allow_groups={true}           # render options under group headers ("group" key)
  search_mode="navigate"        # start in navigate; typing jumps between matches
  show_search_mode_toggle={true} # fullscreen: leading icon flips filter↔navigate live
  options={@grouped_technologies} />

<!-- Theme it exactly like everything else: just signal the scheme. -->
<div data-theme="dark"> … </div>   // or data-theme="light", or OS-auto

TH03 · Sizing — scale the whole picker with --ms-rem

Pick a preset with input-size="xs | sm | md | lg | xl", all scaled off --ms-rem: 10px

Control input field dimensions with the input-size attribute. Five sizes available: xs, sm, md (default), lg, xl.

Note: Heights use Pure Admin standard. Base unit --ms-rem: 10px (default). Set --ms-rem: 1rem for Pure Admin integration.

TH05–TH10 · Theme Examples (Dark · Neon · Audi · Rounded · Sharp · Material + wrapper-only Glassmorphism)

Whole themes from CSS vars on the element: --base-accent-color · --base-input-bg · --ms-input-border-radius