This weekend, I wanted to explore how I can add dark mode to my website, for the benefit of the ~2 people who read my blog. I decided to keep it simple, and use the system-wide preference for the colour mode. I thought I might have to use arcane CSS and Javascript incantations to first query the system dark mode preference, and then set the colours accordingly, but the browser vendors have made it so much simpler and easy to use. Enough Talk! Show me the code Here's all the code required to add dark mode to any website (with a few caveats I'll explain later in this post): <meta name="color-scheme" content="dark light"> That's it! It requires no custom CSS, and is . There's also a corresponding CSS property: , which works on individual tags. supported in all modern browsers color-scheme There's a major caveat though. If you've set custom colours anywhere in your page, using the or CSS properties, this won't work for you. It'll invert the colours only for elements which have no explicit colour set. color background Other approaches If you make substantial use of custom colours in your web pages, you can use the media query in your CSS to get a more fine-grained control on how your webpage looks in different modes. prefers-color-scheme Here's an example: @media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
} I hope this helps! Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Too Long; Didn't Read

Making security fun one episode at a time

Adding Dark Mode to Your Website Using a Single Line of HTML

Too Long; Didn't Read

Shubham Kumaram

STORY’S CREDIBILITY

Guide

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Adding Dark Mode to Your Website Using a Single Line of HTML

Too Long; Didn't Read

Shubham Kumaram

STORY’S CREDIBILITY

Guide

Code License

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES