How to create a theme switcher with HTML & CSS
109,882
Published 2022-11-01
Of course, :has() support isn’t perfect, but we can build in a quick fallback with just a little bit more JS.
🔗 Links
✅ The code from this video: codepen.io/kevinpowell/pen/MWXybWJ
✅ More on visually-hidden: www.scottohara.me/blog/2017/04/14/inclusively-hidd…
✅ Current support for :has() - caniuse.com/?search=%3Ahas()
⌚ Timestamps
00:00 - Introduction
00:57 - What we’re starting with
01:58 - Setting up the color theme selector
04:04 - Hiding the labels
05:39 - Styling the color theme picker
12:05 - Adding functionality with :has()
13:48 - Using localStorage to remember the users choice
23:52 - Adding a fallback for when there is no :has() support
Corrections:
24:54 I should have made separate selectors here, as this won't work in Firefox - see codepen in description for a working version
27:20 Because I moved this here, the theme should have been changed to activeTheme - see codepen in description for a working version
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more a
All Comments (21)
-
Don't apologize for the mistake, you fixing it is valuable content! We need more mistakes lol
-
I just love how Kevin always makes sure to include accessibility features to his website for visually impaired persons. In general, it's very rare in tutorials where you see things like that.
-
I like how the mistake are fixed raw like without editing or trimming the video or even adding annotations. Thanks for that, Kevin
-
Nice one. A tiny note though. In your JS file `document.onload = setTheme()` this expression does not exactly do what you expect it to. When your page loads your JS file runs and when it comes to line 25 `setTheme()` function runs (retrieves data from localStorage, checks one of the radio buttons, etc...) and assigns `undefined` to the `document.onload`. Hence `onload` event doesn't really run at all. Moreover, for this type of action, you could probably use `DomContentLoaded` event. The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (
