DEV Community

The best light/dark mode theme toggle in JavaScript

Salma Alam-Naylor on June 20, 2023

Learn how to build The Ultimate Theme Toggle™️ for your website using JavaScript, CSS custom properties, local storage and system settings. No fram...

Read full post

Méhluli Hikwa • Jun 21 '23

This is lovely, as a CSS wrangler I particularly love the text changing. Your implementation is simple and straightforward. Would love to implement it sometime maybe on my personal website which I am reworking into a nextJS site

Salma Alam-Naylor • Jun 21 '23

Thank you! Good luck, please share the results with me when you're done! ✨

Méhluli Hikwa • Jun 22 '23

I managed to implement a dark/light theme toggle on this small WordPress website.
Cyberthrust Website

Salma Alam-Naylor • Jun 22 '23

Nice! Make sure you follow some of the accessibility guidelines in the post to make sure screen readers understand what the toggle is for. Otherwise, works nicely!

Méhluli Hikwa • Jun 30 '23

Thank you for that observation totally overlooked it.

Nick Taylor • Jun 20 '23

Roktim Kamal Senapoty • Jun 20 '23

Great One @whitep4nth3r

brittanyhurthead • Jun 21 '23

Definitely saving this to use later! So cool!

Akin C. • Jun 24 '23

Yes, pretty cool :D!
It's very nice of Salma Alam-Naylor to provide the code in Codepen to see how things work.

Schemetastic (Rodrigo) • Jun 21 '23

Currently, I'm working on a website which it has this feature, and it's wild that this is almost how I am working on this feature, if I could give an extra suggestion...

Usually we would use darker colors in light backgrounds and lighter colors in darker backgrounds to provide a good contrast. For doing this, I would recommend doing something like this:

:root{
    --golden: #F5C215; /*For darker backgrounds*/
    --yellowish-brown: #9C7B0B; /*For brighter backgrounds*/

    --main-color: var(--yellowish-brown); /*assuming default theme is light*/
}

[data-theme="light"]{
    --main-color: var(--yellowish-brown); 
}
[data-theme="dark"]{
    --main-color: var(--golden); 
}

Now, in our components, we would use the --main-color variable instead of --golden and --yellowish-brown to color our elements. So instead of adding specific colors to the elements depending on which theme is active, they would automatically change.

Eden Wheeler • Jun 23 '23

Great post! I really enjoyed reading your insights and the way you presented your ideas was clear and engaging. Thank you for sharing your knowledge and perspective with us.

Salma Alam-Naylor • Jun 23 '23

Thank you so much Eden! Glad you enjoyed it ☺️

PaZapp • Jun 26 '23

We appreciate you developers. Makes our life enjoyable. Imagine choosing from light and dark theme wow

Panayiotis Georgiou • Jun 21 '23

awesome 🙂

Jeferson Silva • Jun 28 '23

great job, congratulations !

Sree Charan Reddy M • Jan 28

Thank you.
Amazing article.
Helped me a lot

Salma Alam-Naylor • Jan 29

You're welcome!

George WL • Jun 26 '23

I'd argue for a combination of both - use prefers-color-scheme to set the default, and then keep track of user setting

Salma Alam-Naylor • Jun 26 '23

But if prefers-color-scheme isn’t available for some reason, you’ll need a default anyway.

George WL • Jul 6 '23

Yeah, fallbacks on fallbacks, simple

Dmitry Azaraev • Jul 6 '23

"While this works, it’s not classed as valid HTML and I can’t find any documentation on it! Any insight on this is much appreciated. 😅"

HTML represents DOM in text form. Any attribute name is valid, as long, as it is valid HTML/XML attribute name. data- convention means literally nothing than convention and treated exactly in same way as any other name. More over: all attributes handled in same way. So you must not say about validity just based on this. At least you should point in which schema or tool is considered invalid. However this is pointless, because, everything what works in browser - is perfectly valid.

Salma Alam-Naylor • Jul 7 '23

The W3C markup validation service claims that color-mode on HTML is invalid.

Mahdi Hosseinzadeh • Jul 21 '23

Check out this ready to use toggle which supports system theme and changes with animation:
github.com/mahozad/theme-switch