DEV Community

Simple Dark/Light mode

matoval on May 13, 2020

Here is the simplest way I found to add dark mode to a project: Add a toggle button in your HTML with a checkbox and an onClick calling a JavaScrip...

Read full post

Drawcard • May 14 '20

In addition you can implement prefers-color-scheme media queries to also trigger dark mode, if this is set in user preferences: developer.mozilla.org/en-US/docs/W...

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

Duy K. Bui • May 14 '20

I also read somewhere that you can also hook into the ambient sensor of the laptop.

Not sure if the following was the original published source but that's where I read it.
blog.arnellebalane.com/using-the-a...

matoval • May 14 '20

That's awesome!

matoval • May 14 '20

Do you have a link to your code? The code I posted in the article are only the parts of the code that have to do with dark/light mode.

Michael Tharrington • May 14 '20

Love the way this dark/light mode functions.

Also, seriously cool cover image for this post. 😀

matoval • May 14 '20

Thanks 😁!

Steve Klassen (They/Them) • May 14 '20

That's pretty slick.

Ben Halpern • May 13 '20

This is slick. Similar to how DEV does it but this is more elegant.

matoval • May 14 '20

Thank you for the kind words!

matoval • May 14 '20

OnClick the C needs to be capitalized

Nathan Kurz • May 14 '20

This is pretty awesome. So cool seeing such an easy way to implement such a highly requested feature in many applications.

matoval • May 14 '20

I added the codepen at the bottom of the article.

Alexi Taylor 🐶 • May 14 '20

But what about IE? Aren't CSS variables not supported in that unsightly browser?

Bayu Angora • May 13 '20 • Edited

I use dark mode too. But your method is more simple and straightforward.

matoval • May 14 '20

You have two head tags

matoval • May 14 '20

I'll write this code in a codesandbox and add it to the article.