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
tempo-text-color--normal	Normal text color. This color depends on the user’s theme settings.
tempo-text-color--secondary	Secondary text color. Often for less important information. This color depends on the user’s theme settings.
tempo-ui--background	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.
tempo-bg-color--theme-primary	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.
tempo-bg-color--theme-accent	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
tempo-text-color--link	Link color for text. This will be applied automatically when using a tags with an href attribute.
tempo-text-color--placeholder	Placeholder text color is used for placeholders in input fields, and similar suggestions. This color depends on the user’s theme settings.
tempo-text-color--disabled	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.
tempo-text-color--theme-primary	This text color matches the user’s background color of their navigation. This color depends on the user’s theme settings.
tempo-text-color--theme-accent	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.
tempo-ui--layout	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.
tempo-text-color--external	Color to reflect that this text applies to data outside of your organization. See note below.
tempo-bg-color--external	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
tempo-text-color--white	Constant white text color.
tempo-text-color--black	Constant black text color.
tempo-text-color--red	Constant red text color.
tempo-text-color--green	Constant green text color.
tempo-text-color--blue	Constant blue text color.
tempo-text-color--yellow	Constant yellow text color.
tempo-text-color--cyan	Constant cyan text color.
tempo-text-color--purple	Constant purple text color.
tempo-text-color--orange	Constant orange text color. See note below on how to use with tempo-text-color--external.
tempo-bg-color--white	Constant white background color.
tempo-bg-color--black	Constant black background color.
tempo-bg-color--red	Constant red background color.
tempo-bg-color--green	Constant green background color.
tempo-bg-color--blue	Constant blue background color.
tempo-bg-color--yellow	Constant yellow background color.
tempo-bg-color--cyan	Constant cyan background color.
tempo-bg-color--purple	Constant purple background color.
tempo-bg-color--orange	Constant orange background color. See note below on how to use with tempo-bg-color--external.

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.