TH01 How it works

--base-* on a parent → every nested switch picks it up

Theme block
--base-* theme 
 
 
What happens
 
Component-level --sw-* variables resolve through var(--base-*, fallback). Same convention as @keenmate/web-multiselect and @keenmate/web-daterangepicker — themes generated by @keenmate/theme-designer work out of the box.
 
Resolution order at every property: itemStyles data → --sw-* → --base-* → fallback.
 
Theme presets
 
Same components, different --base-* values on each theme container.
				Presets ported from @keenmate/web-multiselect's theming examples.
 
Default
 
Hardcoded fallbacks — no --base-* set. Multi has no itemStyles.
 
 
  
 
 
Option 2
Dark
 
Dark surfaces, blue accent. Multi steps follow blue intensity.
 
 
  
 
 
Option 2
Neon / Cyberpunk
 
Magenta + cyan on near-black. Multi steps cycle the palette.
 
 
  
 
 
Option 2
Audi Sport
 
Brand red on light gray. Multi steps escalate from eco to dynamic.
 
 
  
 
 
Option 2
Rounded Pink
 
Pillow corners, soft pink palette. Multi steps walk pink shades.
 
 
  
 
 
Option 2
Sharp Brutalist
 
Pure black/white, no shadows, zero radius. Multi steps invert.
 
 
  
 
 
Option 2
Material
 
Google Material Design blues. Multi steps escalate elevation.
 
 
  
 
 
Option 2
Glassmorphism
 
Translucent surfaces over a gradient. Multi steps stack opacity.
 
 
  
 
 
Option 2
 
TH02 Per-instance overrides via --sw-*
 
Skip --base-* and target component-level variables when you want one-off styling
 
Code
 
 
 
 
Variable list
 
The full catalogue of --base-* and --sw-* variables
						the library consumes ships at the package root as component-variables.manifest.json.
 
Common overrides
 
  • --sw-bg-off — Off-state surface
    •  
  • --sw-bg-on — On-state surface (default: accent)
    •  
  • --sw-thumb-bg — Thumb fill
    •  
  • --sw-thumb-border-color — Thumb border
    •  
  • --sw-step-bg / --sw-step-bg-active — Step segments
    •  
  • --sw-focus-color / --sw-focus-ring — Focus ring
    •  
  • --sw-border-radius / --sw-shadow — Corners and shadow
 
TH03 Sizing convention (coefficient × --sw-rem)
 
Radius and font-size variables are unitless multipliers
 
Recipe
 
 
 
 
Why?
 
Following the multiselect / daterangepicker / pure-admin convention, --sw-rem is the multiplier for coefficient-based variables.
						Default 10px matches pure-admin's html { font-size: 10px } baseline.
 
Set --sw-rem: 1rem at the root in pure-admin apps so switches
						scale with the user's font-size preference.
 
See the Sizes page for the named-size table.