DS nav
Theme System Demo
Basic Usage
Default Colors (Synced)
This uses the default global color and follows the global toggle
Primary Color (Synced)
Uses primary color, also synced with global toggle
Custom Colors & CSS Variables
Purple Theme
Custom base color with moderate contrast
Accent Color
Using CSS custom property --accent-color
Color Palette Examples
Blue Theme
Using --blue-6 from the color palette
Purple Theme
Using --purple-5 from the color palette
Pink Theme
Using --pink-6 for a vibrant pink theme
Violet Theme
Using --violet-5 for a rich violet theme
Red Alert
Using --red-6 for important/alert content
Neutral Gray
Using --neutral-7 for a neutral theme
Contrast Variations
High Contrast
lightness=0.05 creates strong contrast
Low Contrast
lightness=0.35 creates subtle contrast
Color Scale Demonstration
Light Blue
Using --blue-3 for a lighter variant
Dark Blue
Using --blue-9 for a darker variant
Local Overrides
Always Dark
This container ignores the global toggle
Custom FG/BG
Using gray scale variables for fg/bg
Advanced Examples
Parent Container
This is the outer container with blue theme
Nested Container
Different color scheme nested inside
Local Toggle Demo
This container has its own toggle (independent of global)
Default Colors (Synced)
This uses the default global color and follows the global toggle
Primary Color (Synced)
Uses primary color, also synced with global toggle
Purple Theme
Custom base color with moderate contrast
Accent Color
Using CSS custom property --accent-color
High Contrast
lightness=0.05 creates strong contrast
Low Contrast
lightness=0.35 creates subtle contrast
Always Dark
This container ignores the global toggle
Custom FG/BG
Explicit colors that swap with toggle
Parent Container
This is the outer container with blue theme
Nested Container
Different color scheme nested inside
Local Toggle Demo
This container has its own toggle (independent of global)
