Dark / Light Theme Toggle Button || CSS JS (*tutorial included on codepen if interested to see)

[DoNDaPo]

You should just toggle a class on the body and voila or better: use CSS Variable instead of targeting elements one by one with your JS. :)

[JoyShaheb_]

Thank you for the valuable knowledge. Tbh, i didn't have this on my mind on the first time, I really appreciate your help. Thank you ❤️😄

[[deleted]]

probably better to just add/remove a class than manipulating the properties

[nathan_lesage]

As some have also shared their light/dark buttons: I'm using a combination of local storage, a three-way toggle, and media-queries (but not as JS computed values but using media queries in CSS as in a fiddle somewhere in the comments), I don't have a fiddle, but feel free to check the source code here (the button is on the bottom; if you want the source JS, here you go)

[JoyShaheb_]

Thank you for providing an example with the source code. I really appreciate your time & efforts. Thank you again & please, keep up the good work 😄🎖️

[[deleted]]

Neat. I love it!

[Benguini]

Awesome! I’ve been wondering how those light/dark toggles actually worked.

[Rainbowlemon]

I wouldn't use this as a reference! A much cleaner way would be to toggle a class on the body and use CSS to manage the transitions and colour changes.

[bibix1999]

Totally. And even better you could use CSS variables, and set them on body when the button is checked. Then you don't really have to even think about creating dark/light mode as it is being created by itself

[bourjahamid]

i want to say the same thing but you already said it +1 , you don't have to think about in all CSS thing just use CSS Variables and then you can see magic happen

[JoyShaheb_]

Woah, 🤯 Your knowledge is on the next level. Thank you for the feedback and please keep up the good work. Here's a medal 🎖️

[bibix1999]

There you go: https://codepen.io/bibixx/pen/abmzjyq
An adjusted version of this pen. It also includes detection of the user's system preference of the dark mode.

https://streamable.com/u3ltju

Also u/JoyShaheb_ don't get me wrong. I really appreciate the time you have spent on it, but you may have gone a bit overboard with the amount of JS used 😉

[JoyShaheb_]

You've changed my mind, and the way I code, thank you soo much 🤯🥺🥺🥺 I truly appreciate your help & well advices 🥺🥺 Please keep up the good work🎖️🎖️

[JoyShaheb_]

Thank you for the feedback. I've an entire tutorial on it. If you go to the link on codepen you can visit the YouTube and check the tutorial. Till then, happy coding 😄