Skip to content

Managing Light and Dark Modes

Switching between light and dark modes for a web app is often accomplished by creating a .darkmode CSS class that can be added to a container such as the <body> element.

The Theme Builder follows this strategy and enables sections of its UI to display atomic elements in dark mode by including a .darkmode class.

<body class="... darkmode">
</body>

The Theme Builder generates root light mode and dark mode colors and stores them in CSS variables that can be used when creating your component classes. The naming convention for these variables is --varName for light mode and --dm-varName for dark mode.

For example, if the design system has a color in its color palette named mycolor and uses this color in its default color theme, the root button variables generated by the SDK could use it like so:

--button: var(--mycolor-400);
--on-button: #FFFFFF;

--dm-button: var(--dm-mycolor-400);
--dm-on-button: #121212;

All root variables are added to the :root css as they are generated by the SDK. This is why the Theme Builder UI is responsive to property value changes in the SDK. (See TS.css for the Theme Builders root CSS).

:root {
    --button: var(--mycolor-400);
    --on-button: #FFFFFF;
    --dm-button: var(--dm-mycolor-400);
    --dm-on-button: #121212;
    ...
}

These CSS variables are then available to be used by your component. For example, the button component CSS classes that style a button:

.button {
  background: var(--button) !important;
  color: var(--on-button) !important;
}

.darkmode .button {
  background: var(--dm-button) !important;
  color: var(--dm-on-button) !important;
}

Any new components added to Theme Builder should use the same approach to ensure they work correctly. In addition, this approach is recommended for applications and component libraries that use a design system generated by Theme Builder.