Learn how to build The Ultimate Theme Toggle™️ for your website using JavaScript, CSS custom properties, local storage and system settings. No fram...
For further actions, you may consider blocking this person and/or reporting abuse
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
Thank you! Good luck, please share the results with me when you're done! ✨
I managed to implement a dark/light theme toggle on this small WordPress website.
Cyberthrust Website
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!
Thank you for that observation totally overlooked it.
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:
Now, in our components, we would use the
--main-colorvariable instead of--goldenand--yellowish-brownto color our elements. So instead of adding specific colors to the elements depending on which theme is active, they would automatically change.LOVE this theme toggle. It is much simpler than what I had been using, and it was easily adapted to the webpage for my home intranet. I simplified it a little more because it is a toggle: the button was changed to simply "Theme" and the Aria label was changed to "Change color theme." I added an (1) initialization function and a (2) change theme function to my javascript library. Everything then worked even better when I eliminated the default from the html tag. My configuration relies on system settings or user selection. I truly love the simplicity of your design.
Thank you, Steven! Happy to help!
Definitely saving this to use later! So cool!
Yes, pretty cool :D!
It's very nice of Salma Alam-Naylor to provide the code in Codepen to see how things work.
Great One @whitep4nth3r
great job, congratulations !
We appreciate you developers. Makes our life enjoyable. Imagine choosing from light and dark theme wow
awesome 🙂
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.
Thank you so much Eden! Glad you enjoyed it ☺️
Thank you.
Amazing article.
Helped me a lot
You're welcome!
I'd argue for a combination of both - use
prefers-color-schemeto set the default, and then keep track of user settingBut if
prefers-color-schemeisn’t available for some reason, you’ll need a default anyway.Yeah, fallbacks on fallbacks, simple
"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.
The W3C markup validation service claims that
color-modeon HTML is invalid.Added this feature to one of my projects and making the various pages go dark or light was so easy. :-)
Only issue is that when I switch between pages there is a flash before the theme switches.
Any ideas?
well duh - I didn't have the script at the very bottom of my doc body. Moved to the bottom and it works great, no flashing. cheers
Glad it was useful for you!
Check out this ready to use toggle which supports system theme and changes with animation:
github.com/mahozad/theme-switch