DEV Community

Cover image for CSS: Easy dark mode
Reuven Hozias
Reuven Hozias

Posted on

21 2 3 2 2

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (8)

Collapse
 
mardeg profile image
Mardeg • • Edited

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.

Collapse
 
madsstoumann profile image
Mads Stoumann •

My dark-mode starter-template:
Dark Mode Starter Template

Collapse
 
arunkrish11 profile image
Arun Krish •

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

Collapse
 
martygo profile image
Martins Gouveia •

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

Collapse
 
hreuven profile image
Reuven Hozias •

Absolutely, simple ant yet powerful!

Collapse
 
mince profile image
Mince •

Wow

Collapse
 
hreuven profile image
Reuven Hozias •

Absolutely!

Collapse
 
vitalicus profile image
Vitalie Lisnic •

Please, write the code example

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more