Quick orientation. Per-instance one-off colours go through itemStyles (this page). Cross-cutting brand themes go through --base-* / --sw-* CSS variables — see the dedicated Theming page.

ST01 Color Customization

Customize a single switch's colours via itemStyles

Live Demo
Custom Red:
State: OFF
Custom Green:
State: ON
Code
 
 
Color Properties
 
StepStyle Properties
 
  • backgroundColor — Track background colour
    •  
  • thumbColor — Thumb (handle) colour
    •  
  • thumbBorderColor — Thumb border colour
 
Color Formats
 
Any valid CSS colour: hex, rgb, rgba, hsl, named colours.
 
Resolution Order
 
Per-property: itemStyles data → --sw-* → --base-* → fallback. itemStyles wins.
 
ST02 Pre-defined Themes
 
Reusable itemStyles objects for consistent per-instance styling
 
Live Demo
 
Red Theme: 
 
Green Theme: 
 
Blue Theme: 
 
Purple Theme: 
 
Code
 
 
 
 
Pattern Notes
 
When to use this pattern
 
This works for a small set of one-off colour treatments. For an entire app
						theme — including non-switch components — use the --base-* cascade instead. Setting --base-accent-color on a parent themes every nested switch
						(and every other KeenMate component) at once.
 
ST03 MultiSwitch Per-Step Styling
 
Pass an array of styles, one per step
 
Live Demo
 
Priority Level: 
  
 
 
Option 2
 Priority: Medium
 
Power Mode: 
  
 
 
Option 3
 Mode: Sport
 
Code
 
 
 
 
Per-Item Styling
 
Array vs Object
 
itemStyles accepts either an array (one StepStyle per step) or
						a single StepStyle object (applied to every step).
 
Visual Hierarchy
 
Use different colours to create meaning — red for critical, green for safe.
						Priority-coloured switches communicate severity at a glance.
 
ST04 Size and Style Combinations
 
Combining sizes with custom styling
 
Live Demo
 
size={40}: 
 
size={60}: 
 
size={80}: 
 
Vertical + size={100}: 
 
Code
 
 
 
 
Design Tips
 
Scalable Styling
 
Custom styles work consistently across all sizes. The component scales
						colours and proportions automatically.
 
Responsive Design
 
Consider using different sizes for different screen sizes — smaller for
						mobile, larger for touch interfaces. The named sizes
						('sm'...'xl') work well in form contexts.
 
CSS Variable Customization (v2.0+)
 
Per-instance overrides via --sw-*
 
Set --sw-* variables in a style= attribute to
						override one switch's colours without touching others.
 
Per-instance overrides 
 
 
 
App-wide theme via --base-*
 
Set --base-* on a parent (or :root) and every
						switch underneath picks up the theme. Same convention as web-multiselect /
						web-daterangepicker.
 
App-wide theme 
 
 
 
→ See full Theming guide with live presets
 
Styling Best Practices
 
🎨 When to use what
 
  • ✅ itemStyles — single switch, ad-hoc colours
    •  
  • ✅ --sw-* on a switch — single switch, theme-aware overrides
    •  
  • ✅ --base-* on parent — app-wide branding
    •  
  • ✅ All three combine via the resolution order
 
📐 Size Guidelines
 
  • ✅ Default 'md' aligns with pure-admin form heights
    •  
  • ✅ Use named sizes for forms; numeric for one-off displays
    •  
  • ✅ Minimum ~44px for touch interfaces
    •  
  • ✅ Test on different screen densities
 
Next Steps
 
🌈
 
Theming
 
Live --base-* / --sw-* playground
 Theming
 
⚡
 
Advanced
 
Custom snippets and complex examples
 Advanced
 
📚
 
API Reference
 
Complete documentation
 API Docs