Colors
Theme Colors
Symphony supports a large variety of color themes, to ensure that your applications always feel familiar to users, you should use the following colors:
Color | Description |
| Normal text color. This color depends on the user’s theme settings. |
| Secondary text color. Often for less important information. This color depends on the user’s theme settings. |
| Background color for the user’s Symphony web clients, and your application. Can be particularly useful when doing overlays and wanting to match the background color of the app. Dark or light depending on the users theme settings. By default, we recommend that iframe based applications and renderers backgrounds are transparent. The background of conversations change in color depending on what the user is focused on, and that change of state will then be visible by default. This color depends on the users theme settings. |
| This is typically the color of the uses navigation, and can create a dynamic looking UI as it changes to the users preference. This color depends on the user’s theme settings. |
| This is generally a complimentary color of the users primary theme color, and can create a dynamic looking UI as it changes to the users preference. This color depends on the user’s theme settings. |
Advanced theme colors
For more advanced visual elements, you need to also use the relevant theme-specific colors below:
Color | Description |
| Link color for text. This will be applied automatically when using a tags with an |
| Placeholder text color is used for placeholders in input fields, and similar suggestions. This color depends on the user’s theme settings. |
| Disabled color text is used for elements that are not clickable or applicable at the time of viewing such as disabled URLs. This color depends on the user’s theme settings. |
| This text color matches the user’s background color of their navigation. This color depends on the user’s theme settings. |
| This text color matches the users accent color, which is generally a complimentary color to the user’s navigation background. This color depends on the user’s theme settings. |
| The opposite of the background color. In a dark theme, it will be white. In a light theme, it will be black. This color depends on the user’s theme settings. |
| Color to reflect that this text applies to data outside of your organization. See note below. |
| Color to reflect that this text applies to data outside of your organization. See note below. |
Constant Colors
If you do need to use specific colors, the color styles below are constant and not theme-specific:
Color | Description |
| Constant white text color. |
| Constant black text color. |
| Constant red text color. |
| Constant green text color. |
| Constant blue text color. |
| Constant yellow text color. |
| Constant cyan text color. |
| Constant purple text color. |
| Constant orange text color. See note below on how to use with |
| Constant white background color. |
| Constant black background color. |
| Constant red background color. |
| Constant green background color. |
| Constant blue background color. |
| Constant yellow background color. |
| Constant cyan background color. |
| Constant purple background color. |
| Constant orange background color. See note below on how to use with |
Note: tempo-text-color--orange and tempo-bg-color--orange should be used with caution. The color orange is primarily used to represent conversations and people that are external to your company. If you plan on representing external chat rooms, users, or companies, we recommend that you use tempo-bg-color--external and tempo-text-color--external.
Last updated