Getting Started
Core Features
How-To Guides
Integrations
Troubleshooting
Styling themes allow you to change the visual appearance of your interface, including background colors, text colors, and borders. By using predefined color schemes, you can ensure your application remains visually consistent while providing support for both light and dark display modes.
A theme is a collection of color settings that dictate how different parts of your interface look. The system uses a set of standardized color definitions, such as:
The system automatically adapts to your preferences. When "Dark Mode" is active, the theme colors shift to darker, more comfortable tones to reduce eye strain, while maintaining high readability for text and icons.
Note
The theme automatically swaps your color palette when the system-wide dark mode setting is toggled on or off.
The following table outlines how different color roles are used across the interface:
primary, muted) rather than specific color names. This ensures that if you switch to a different theme later, your interface colors will update automatically to match the new style.Tip
If you are designing custom components, use the "Primary" color for buttons or links that represent the most important user actions on the page.
Warning
Do not hardcode specific colors for primary interface elements. Using the built-in theme variables ensures your application will respect user preferences like High Contrast mode or Dark Mode.