Skip to main content

Light mode / dark mode

TURN ALL THE LIGHTS ON OFF — T-pain - Us

Many of our customers have chosen to turn all the lights off. Specifically, their application is available in both a light mode and dark mode theme.

We support contrast-diversity, and so Command AI themes have built-in support for light mode and dark mode variations of your theme.

What happens by default​

Every theme you create has two variants, a light variant and a dark variant. You can toggle between them using this handy toggle.

When you first open a theme, by default, you’ll be editing the light theme. The dark theme will then be pre-computed for you.

Customizing dark mode​

For any theme, you can edit any property of the dark mode independently of light mode. The only thing to note about doing so is that once you edit a property, that property will no longer inherit from the corresponding light mode property.

For example, by default, the Accent color is the same in light mode and dark mode. So if you change the light mode accent color, the dark mode property will also change.

Once you change dark mode accent property, if you then subsequently change the corresponding light mode property, the dark mode property won’t update. To reset the inheritance relationship, you can use the reset button.

How do I enable dark mode for users?​

You can use our SDK to detect your users’ preferences and automatically set light or dark mode for the currently active theme, or you can explicitly set it based on a user setting or action.

Automatically detect user's system preferences​

window.CommandBar.setThemeMode("auto");

Set dark mode​

window.CommandBar.setThemeMode("dark_mode");

Set light mode​

window.CommandBar.setThemeMode("light_mode");