Themes
Theme options that allow user customization of Dialpad products.
Overview
Dialtone's theming system is a flexible foundation for creating consistent visual experiences. It lets you adapt the user interface to different contexts, preferences, and product variations. Our approach uses semantic color tokens to easily switch between themes and modes.
Theming is limited to the application's navigation regions, consisting of the top and left.
Mode
A mode defines a visual style that applies across all themes. It determines the overall luminosity and contrast of the interface. For example, light mode has a light background and dark text, while dark mode has a dark background and light text.
Theme
A theme represents the core color scheme. It applies a unique set of colors to themeable regions, and it works in conjunction with a mode. For example, the default "Dialpad" theme accent may be purple, while a "Sunflower" theme's is a deep yellow.
Theme List
| Theme | Light Mode | Dark Mode |
|---|---|---|
Dialpad | ||
T-Mobile |
Theming with Shell Tokens
The shell tokens are a specialized set of tokens for theming the topbar and sidebar. They are designed to be easily customized while maintaining a coherent color scheme.
Shell Base Tokens
These are the core reference colors for the shell. They are directly linked to the base tokens and determine the overall color palette of the topbar and sidebar. These base tokens are the only ones that should be modified when creating a custom theme.
Shell Modifier Tokens
These tokens, such as shell-action..., shell-status... shell-mention..., inherit their values from the shell base tokens. For example, they use modifiers to create variations or color states (e.g., hover, active, disabled).
This structure allows for a cascading effect: changing a shell base token automatically updates all related shell modifier tokens, making it simple to create and manage custom themes for the application's shell.
Accessibility
When creating a custom theme, it is important to ensure that the colors used are accessible. This means that the colors should be easy to read and contrast well with the background.
Do
Don’t
Related
- If you need full list of all the shell tokens, Check out our list of colors.
- See our entire token catalog with full descriptions and values of all tokens..