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.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Of Shaved Yaks and Bicycles Sheds

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Of Shaved Yaks and Bicycles Sheds

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps