CSS: Easy dark mode

A dark mode is a display option that switches the color theme of a website or application from a light background (with dark text) to a dark background (with light text). This mode has grown popular for its benefits in reducing eye strain in low-light environments, saving energy on devices with OLED screens, and offering a visually appealing alternative to traditional light themes.
Usually, you can toggle between 3 modes: dark, light and System theme setting.

Old way

Till now we've used the prefers-color-scheme CSS media feature:

The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

As you can see, we need to maintain 2 themes, one for each mode.
Taking this approach in a large-scale application may be difficult.

New and better way

Luckily, CSS has introduced a new property to make our life easier, light-dark() and it is supported by all major browsers:

The light-dark() CSS function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

Just use the light-dark() property on each element we wish to toggle between modes, that's it!

Comments

[Mardeg]

Thanks so much for this, if you don't mind I linked to this article from mine about when the boss absotively posilutely wants a toggle button for light/dark mode.

[Mads Stoumann]

My dark-mode starter-template:

[ARUN KRISHNAN K]

Thank you very much. Let me try this!!!

[Martins Gouveia]

This feature, Blowing my mind 🔥🔥🔥🎉🎉.

[Reuven Hozias]

Absolutely, simple ant yet powerful!

[Mince]

Wow

[Reuven Hozias]

Absolutely!