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 has 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 them or you can explicit set it based on a user setting or action.

// Have the active theme detect the users prefreed color scheme and use it
setThemeMode('auto')

// Or explicity set the color scheme based on a user setting or action
// Set to light mode:
setThemeMode('light')

// Set to dark mode:
setThemeMode('dark')