Create A Dark/Light Mode Switch with CSS Variables

Ananya Neogi on April 10, 2019

Giving your users a way to customise the interface to their preference is a huge win for user experience. Here we are going to provide the user wit... [Read Full]
markdown guide
 
 

Wait, what! There is dark theme for dev.to, nobody told me about that. πŸ˜‚

 

Dark mode is new, and it's fabulous (with a few kinks that still need to be worked out).

Settings ➑ Misc. On that page you'll find it under "Style Customization"

 
 

Where is bro? Just tell me where is it? I didn't know about it...

 

Instead of using the following instruction you used, which forces two calls to localStorage (which is pretty slow),

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

you could use an or operator.

// Value at right-hand side of || is the default
const currentTheme = localStorage.getItem('theme') || null;

or, in this case, as the default is null, even simpler,

const currentTheme = localStorage.getItem('theme');

by taking the property of localStorage.getItem to return null on unknown key to directly return the expected value/default.

 

Yes, this makes more sense. Thanks! πŸ™‚
I'll update the demo.

 

Thanks for this! I haven't tried my own light/dark mode since I tried implementing it on my first bootcamp project a couple years ago. I technically got it to work, but the code was not this DRY as I made two individual buttons that would add/remove a "dark" or "light" class on the entire body element. πŸ˜‚ Your solution is much better!

 

Nice post πŸ‘ŒπŸ‘Œ 🀩
Gonna embed into my portfolio

 

I'm planning to experiment with something like this, but using CSS only (no javascript).

 

You won't believe it, but actually you can nowadays even take the operation system setting for the dark mode and apply/get that, so your users don't even need that toggle, or at least use the version they prefer, by default.
With CSS and JS…

 

Very cool.

Have you thought about the prefers-color-scheme media feature? How could this be implemented in this script? You should check that too In my opinion. The toggle would have to automatically switch to the preferred color scheme.

 

Thank you Ananya! Great article, loved the tip about how to come up with a night theme :)

 

this is great and so helpful - thanks so much! I do have one question - in the js, where does "light" come from? unless I'm missing it, that's not defined in the CSS, is it?

 

Hi Desi!
You're right, it's not defined anywhere.
If CSS doesn't find any specific styles related to light it will default back to the normal variables defined in :root.

Why I added it?
I added it so that we can use it while checking for the saved theme in localStorage further and add it to the root element. It will also be useful in cases where you might want to add some specific styles for light apart from the default styles.

I hope this helps πŸ™‚

 
 
 

Great post. I would love to add a Dark theme to my website, but probably won’t have the time 😭. Bookmarked your article anyways πŸ€“

 

Thanks! It will help me a lot. I've been using it wrong (but working), now you've cleared my mind. :)

 
 

Very Cool! Trying to figure out how to toggle between bg color & bg picture.

 
code of conduct - report abuse