Color mode

The color scheme controls whether a UI renders in light or dark mode. Set it centrally with the com.unblu.theme.color.colorScheme property, which takes one of three values:

You can set the color scheme at any scope, from the global default down to an individual team, user, or API key.

The evaluation mode determines how colors with separate light and dark variants are evaluated. Set it with the com.unblu.theme.color.colorSchemeEvaluationMode property, which takes one of two values:

You can set the evaluation mode at any scope, from the global default down to an individual team, user, or API key.

Browsers that don’t support the light-dark() function fall back to static evaluation.

Unblu has two kinds of color configuration property: simple colors and complex colors. Only complex colors can hold separate values for light and dark mode. For the difference between simple and complex colors and the syntax of each, refer to Color values.

In the Settings tab of the Account Configuration interface, search for a complex color property and click Add dark color. Unblu adds a second color field: the first value applies in light mode, the second in dark mode. To return to a single value for both modes, click Remove dark color.

If a complex color has only one color variant, Unblu uses that variant in both light and dark mode. When a color has both variants, Unblu stores it using the CSS light-dark() function, in the form light-dark(<light-color>, <dark-color>). Each variant can be a literal color, a reference, or a color function, as described in Color values.

Unblu cascades the whole complex color value, not the light and dark variants separately. When you override a color, your value replaces both the light and the dark variant. A single-value override therefore applies in both modes, even where Unblu’s default provided a separate dark variant. To keep different colors for light and dark mode, set both values yourself.

To add dark mode support to a custom theme, set dark values on the central colors, such as com.unblu.theme.color.backgroundLight, rather than on individual UI elements. Adjusting a central color updates every element that references it. The core palette colors, such as com.unblu.theme.color.primary and com.unblu.theme.color.gray, are simple colors, so they hold a single value that’s the same in both modes. The variation between light and dark mode comes from the complex colors that build on them.

Agents can switch between the light and dark color schemes from the user menu in the Agent Desk. An agent’s choice sets the color scheme in the USER scope, so it applies only to that agent and takes precedence over broader scopes.

The menu item appears by default. To hide it, set com.unblu.ui.usermenu.showChangeColorScheme to false.

The audio and video call UI doesn’t follow the color scheme. It uses fixed dark colors, so it looks the same in light and dark mode.

To give the call UI a lighter appearance, override its base colors:

Most elements of the call UI derive their colors from these three properties. To fine-tune the call action bar buttons, configure the properties in the com.unblu.core.client.conversation.call.button.CallActionBarButtonConfiguration group.

The login page follows the central color scheme set by com.unblu.theme.color.colorScheme. Because no account or named area is known before a user signs in, the login page uses only the color values set in the GLOBAL scope. Values set in narrower scopes don’t apply.

To make the login page follow the user’s operating system, set com.unblu.theme.color.colorScheme to auto in the GLOBAL scope.

On the login page, the logo switches between the standard logo and the inverse logo to match the color scheme. To make sure it displays correctly in dark mode, provide an inverse logo as described in Branding.