Dark themes with modern CSS

Since the release of Windows 10 in 2016, dual color scheme modes have been more and more common on our daily basis. Introduced in 2020, the color-scheme property in CSS is probably one of the most waited features to be implemented on the major browsers.

Perhaps the most popular way of defining a color scheme is to define custom properties based on the user's system preference.

:root {
  --text-color: black;
  --bg-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: white;
    --bg-color: black;
  }
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

However, there has been some recent development on this area that allows this code to be even simpler. Since May 2024 you can safely use the light-dark function to simplify the code above.

:root {
  color-scheme: light dark;
  --text-color: light-dark(black, white);
  --bg-color: light-dark(white, black);
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}