Color Customization

Customize colors using itemStyles prop

Live Demo
Custom Red:
State: OFF
Custom Green:
State: ON
Code
 
 
Color Properties
 
Available Style Properties
 
  • backgroundColor - Track background color
    •  
  • thumbColor - Thumb (handle) color
    •  
  • thumbBorderColor - Thumb border color
 
Color Formats
 
Use any valid CSS color format: hex, rgb, rgba, hsl, or named colors.
 
Pre-defined Themes
 
Collection of ready-to-use color themes
 
Live Demo
 
Red Theme: 
 
Green Theme: 
 
Blue Theme: 
 
Purple Theme: 
 
Code
 
 
 
 
Theme Usage
 
Consistent Design
 
Create a collection of themes to maintain consistent styling
						across your application.
 
Material Design Colors
 
These examples use Material Design color palette for professional
						appearance and accessibility.
 
MultiSwitch Styling
 
Individual styling for each option
 
Live Demo
 
Priority Level: 
  
 
 
 Priority: Medium
 
Power Mode: 
  
 
 
 Mode: Sport
 
Code
 
 
 
 
Per-Item Styling
 
Array of Styles
 
Pass an array of style objects to customize each option individually.
						Each style corresponds to the option at the same index.
 
Visual Hierarchy
 
Use different colors to create visual hierarchy and meaning
						(e.g., red for critical, green for safe).
 
Size and Style Combinations
 
Combining different sizes with custom styling
 
Live Demo
 
Compact (40px): 
 
Standard (60px): 
 
Large (80px): 
 
Vertical + Styled: 
 
Code
 
 
 
 
Design Tips
 
Scalable Styling
 
Custom styles work consistently across all sizes. The component
						automatically scales colors and proportions.
 
Responsive Design
 
Consider using different sizes for different screen sizes:
						smaller for mobile, larger for touch interfaces.
 
Advanced CSS Customization
 
CSS Variables
 
For more advanced styling, you can also use CSS custom properties:
 
custom-styles.css 
 
 
 
SCSS Mixins
 
Create reusable styling mixins for consistent theming:
 
themes.scss 
 
 
 
Styling Best Practices
 
🎨 Color Guidelines
 
  • ✅ Ensure sufficient contrast for accessibility
    •  
  • ✅ Use consistent color palette across your app
    •  
  • ✅ Consider color-blind users
    •  
  • ✅ Test colors in light and dark themes
    •  
  • ✅ Follow your brand guidelines
 
📐 Size Guidelines
 
  • ✅ Minimum 44px for touch interfaces
    •  
  • ✅ Scale proportionally with text size
    •  
  • ✅ Maintain aspect ratios
    •  
  • ✅ Test on different screen densities
    •  
  • ✅ Consider responsive breakpoints
 
Next Steps
 
⚡
 
Advanced Examples
 
Custom templates and advanced features
 Advanced Guide
 
📚
 
API Reference
 
Complete documentation of all props
 API Docs
 
🎮
 
Playground
 
Interactive styling playground
 Advanced Examples