Light and Dark Themes

Many operating systems offer light and dark themes and the user can choose which theme to use and when.

The browser can automatically adapt unstyled elements to the current theme. To do this, the following meta tag must be included in the head:

<meta name="color-scheme" content="dark light">

For styled elements it is possible to detect the user's theme preference using media queries as shown in the following CSS snippet:

/* The default theme is light */
body {
  background-colour: white;
  color: black;
}

/* If requested, display a dark theme */
@media (prefers-color-scheme: dark) {
  body {
    background-colour: black;
    color: white;
  }
}