Just how we do it with dev.to!
CSS variables are awesome.
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).
Oh! I see. How can I enable dark mode?
Settings ➡ Misc. On that page you'll find it under "Style Customization"
Awesome, thanks. Looks cool.
Love the dark mode on dev.to! 🙂
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
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…
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?
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 🙂
Awesome, thanks so much! Explanation makes perfect sense.
You're welcome 🙂
Super duper thanks for article.
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. :)
This isn't not working anymore?
Very Cool! Trying to figure out how to toggle between bg color & bg picture.
Thanks Ananya, it's helpful for me
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.