Light & Dark Mode

Dark mode is a theme that you can apply to our color palette that displays content on darker surfaces, creating a low-light UI environment.

On this page

Using Global Dark Mode

Dark mode is a feature powered by the combination of the DLS stylesheet and design tokens embedded throughout the page. When the dark mode attribute is detected on the page, the DLS stylesheet will re-declare the necessary design token values with dark mode values.

Dark mode can be toggled by setting the data-dls-mode attribute on the html element of a page:

<html data-dls-mode="dark"></html>

In One App modules, this is typically done using the Helmet component from react-helmet to set the body attributes:

<Helmet htmlAttributes={{ 'data-dls-mode': 'system' }} />;

The data-dls-mode attribute supports 3 values:

  • light: light mode (default)
  • dark: dark mode
  • system: uses the operating system’s preference

Dark Mode Toggle

Coming Soon

Using Inline Dark Mode

In addition to being set at the page level, dark mode can also be toggled for sections of a page through the concept of surfaces.

However, this comes with a caveat: global styles provided by the stylesheet will not be updated to reflect the inline dark mode on the component. This is due to the rules around css variable references and scoping - dark mode css variables are only re-declared on the element with the data-dls-mode attribute set (learn more about css variable scoping).

Using the Surface Component

Setting the data-dls-mode attribute on the <Surface> component will apply dark mode, ensure that the surface tokens are updated to reflect dark mode, and apply a background color and text color for children of the component:

<Surface variant='foreground' data-dls-mode='dark'>

Using the Surface Data Attribute

You can achieve the same effect as the <Surface> component without setting the background or text color for children by using both the data-dls-mode and data-dls-surface attributes:

<Card data-dls-mode='dark' data-dls-surface='foreground'>

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.