Customize your application's color palette using the interactive theme color system. Click on any color to change it and see the changes applied throughout the documentation in real-time.
Main brand color for primary actions and emphasis
Example: Primary with On-Primary text
Secondary brand color for supporting elements
Example: Secondary with On-Secondary text
Subtle background color for less prominent elements
Example: Muted with On-Muted text
Main background color for the application
Example: Background with On-Background text
Indicates successful operations and positive states
Example: Success with On-Success text
Informational messages and neutral notifications
Example: Info with On-Info text
Warning messages and cautionary states
Example: Warning with On-Warning text
Error states and destructive actions
Example: Danger with On-Danger text
Background color for cards and elevated surfaces
Example: Surface with On-Surface text
Dark mode subtle background color
Example: Muted with On-Muted text
Dark mode main background color
Example: Background with On-Background text
Dark mode background for cards and elevated surfaces
Example: Surface with On-Surface text
primary / on-primary - Main brand colorsecondary / on-secondary - Secondary brand colormuted / on-muted - Subtle backgroundssuccess / on-success - Success statesinfo / on-info - Informational stateswarning / on-warning - Warning statesdanger / on-danger - Error/danger statessurface / on-surface - Card backgrounds