Dark Theme

DHL UI Library now supports dark mode! With v2.15.0 release, we have introduced a new dark theme design system that provides a set of components and styles that are designed to work together to create a consistent user experience.

Getting Started

By default only light theme is enabled. To enable dark theme, you need to import Theme Switch component. This component will provide the dark theme to all the components in your application.

How it works

When page is loaded an attribute data-dui-theme is added to the html tag. This attribute is used to set the theme of the application. The value of this attribute is set to theme-light by default. When user toggles the theme, the value of this attribute is changed to theme-dark.

All the colors used are listed in the Semantic Colors

tip

To make the best use of the Dark Theme, we suggest using the following color variables:

For background color:

background-color: var(--dui-colors-background-base);

For font color:

color: var(--dui-colors-foreground-primary);

By using these variables, you ensure that the components are visible, readable, and aligned with accessibility standards.

note

You can create your own theme switcher component by following the Theme Switch documentation in case you need additional functionality.

Code

React

<div
  style={{
    padding: '2rem',
    backgroundColor: 'var(--dui-colors-background-base)',
    display: 'flex',
    flexDirection: 'column',
    gap: '20px'
  }}
>
  <DhlThemeSwitch variant="outline" />
  <DhlAlert>Lorem ipsum dolor sit amet consectetur.</DhlAlert>
  <DhlButton variant="outline">Click me</DhlButton>
  <DhlDatePicker />
  <DhlSwitch />
  <DhlText>Lorem ipsum dolor sit amet consectetur.</DhlText>
</div>

Angular

<div
  style="
    padding: 2rem;
    background-color: var(--dui-colors-background-base);
    display: flex;
    flex-direction: column;
    gap: 20px;
  "
>
  <dhl-theme-switch variant="outline"></dhl-theme-switch>
  <dhl-alert>Lorem ipsum dolor sit amet consectetur.</dhl-alert>
  <dhl-button variant="outline">Click me</dhl-button>
  <dhl-date-picker></dhl-date-picker>
  <dhl-switch></dhl-switch>
  <dhl-text>Lorem ipsum dolor sit amet consectetur.</dhl-text>
</div>

Vue.js

<div
  style="
    padding: 2rem;
    background-color: var(--dui-colors-background-base);
    display: flex;
    flex-direction: column;
    gap: 20px;
  "
>
  <dhl-theme-switch variant="outline"></dhl-theme-switch>
  <dhl-alert>Lorem ipsum dolor sit amet consectetur.</dhl-alert>
  <dhl-button variant="outline">Click me</dhl-button>
  <dhl-date-picker></dhl-date-picker>
  <dhl-switch></dhl-switch>
  <dhl-text>Lorem ipsum dolor sit amet consectetur.</dhl-text>
</div>

Preview