Colors in DevExpress Design System
- 2 minutes to read
The Design System color schema is an important part of the application theming mechanism. When you switch a theme, or apply light or dark mode, a predefined color palette applies to UI elements based on their types, roles, and states.
Themes
A theme is a global configuration that defines the visual language and structural characteristics of the interface, such as colors, geometry, typography, and spacing. The theme defines the application’s overall look and feel.
All colors in the Design System are bound to the active theme and color mode (light or dark). Color values are not static. They are defined specifically for each theme to match its brand identity and visual guidelines. When you switch a theme, the underlying color palette changes automatically.
The Design System color schema includes the following two layers:
- Palettes
- Specify the overall visual style.
- Semantic roles
- Specify rules that apply colors to UI elements.
Palettes
A theme contains the following palettes:
- Theme
- Foundational (base) theme colors.
- Utility
- Colors used for status indication and data visualization (charts, diagrams).
- Icon
- Colors used for icons.
You can customize palettes using CSS variables so that they match your brand colors. Note: You must override all 17 colors within a palette (or 25 for a neutral palette) to ensure correct component states (hover, pressed, disabled) and sufficient text contrast.
Semantic Roles
Color roles implement the abstract (semantic) layer of the Design System. A role describes the purpose of a color rather than a specific value.
The Design System maps theme palette colors to values defined for color roles. If you create a custom component, assign color roles to internal elements and that mapping will work with all themes and color modes. Refer to the following section for additional information on how to assign roles correctly: Color Role Schema.