Theme Colors

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.

Interactive Theme Customization: Click on any color below to open the color picker. Your changes will be applied immediately throughout the entire application. Use the "Generate CSS" button to export your customized theme, or "Reset Colors" to restore default values.

Primary

Main brand color for primary actions and emphasis

Primary

On Primary

Example: Primary with On-Primary text

Secondary

Secondary brand color for supporting elements

Secondary

On Secondary

Example: Secondary with On-Secondary text

Muted

Subtle background color for less prominent elements

Muted

On Muted

Example: Muted with On-Muted text

Success

Indicates successful operations and positive states

Success

On Success

Example: Success with On-Success text

Info

Informational messages and neutral notifications

Info

On Info

Example: Info with On-Info text

Warning

Warning messages and cautionary states

Warning

On Warning

Example: Warning with On-Warning text

Danger

Error states and destructive actions

Danger

On Danger

Example: Danger with On-Danger text

Surface

Background color for cards and elevated surfaces

Surface

On Surface

Example: Surface with On-Surface text

How to Use Theme Colors

In CSS/Tailwind Classes

In CSS Custom Properties

Available Theme Colors

primary / on-primary - Main brand color
secondary / on-secondary - Secondary brand color
muted / on-muted - Subtle backgrounds
success / on-success - Success states
info / on-info - Informational states
warning / on-warning - Warning states
danger / on-danger - Error/danger states
surface / on-surface - Card backgrounds