Make every component look like yours

How to create a design theme

The most common way to create a theme is by defining your custom properties on the root element, typically with the :root selector.

:root {
  --dile-hamburger-active-color: #000;
  --dile-primary-color: #f3f3ae;
  --dile-on-primary-color: #303030;
}

Define as many custom properties as you need to personalize your design in the :root selector. Every component ships with sensible defaults, so if you don't specify anything, it will simply look like the light theme used across this site.

Which CSS Custom Properties we use

The custom properties used across components are deliberately consistent, built on a shared set of variables. That consistency is what makes a single set of overrides ripple through the whole catalog.

Each component also documents its own specific CSS variables on its own documentation page. The most common theme adaptations, however, are color related — most of the shared variables across the catalog exist to define color.

Defining a light and dark theme

Use the dile-light-mode-switch component to let visitors toggle between light and dark mode.

It's essentially a switch that adds a dark-theme CSS class to the page's html tag when dark mode is active. As developers, we're responsible for defining the values our color variables should take in each mode:

:root {
  /* Light colors */
  --dile-background-color: #ffffff;
  --dile-on-background-color: #303030;
  --dile-primary-color: #f3f3ae;
  --dile-on-primary-color: #303030;
}

:root.dark-theme {
  /* Dark colors */
  --dile-background-color: #1e1e1e;
  --dile-on-background-color: #ffffff;
  --dile-primary-color: #e1e181;
  --dile-on-primary-color: #1e1e1e;
}