How to create a theme switcher with HTML & CSS

Too bad one can't easily switch stylesheets or palettes.

Quick honest question: does it even make sense to have a theme selector for users on a screen reader? Shouldn’t we just hide it altogether?

What a fantastic tutorial! I learned so much and finally understood :has() a tiny bit better. However, when I'm trying it out in does work perfectly in Chrome but not at all in Firefox, even with the fallback :( I tried playing around with it to make it work in Firefox, but it just doesn't want to...

So humble man...How he is apologizing for one mistake!❤❤

How can we restore the current colours assuming these five new colours are additional and not the default? Going to assume we can delete all and any saved cookies related to theme. My knowledge of JS is very limited.

Is it possible to use this kind of button to make language switchers?

Is there a way to place the theme switcher inside the navbar container and only change the "Content" area to black theme? I
If I place the color switcher outside of the container I have the problem, that I cannot make the switcher responsive. Do you have an idea how to solve this problem? I would like to only use CSS and HTML, if possible.

Good luck Kevin. I referred your channel to my interns. You have wonderful contents. Big thumbs up for your effort 🤜🤛

Oh, Lord Algorithm has popped this into my paws right on time...

Fantastic tutorial!

I am having a issue when I set my dark theme and refresh page it loads the light theme first for .5s because I have the styling with transitions , can anyone help I can’t figure it out

The problem is that the page flashes until Javascript makes the selected theme selectable ;-), it's not usable
(especially on a larger site )

Instead of apologizing for making a mistake, please consider editing your video.

Thanks! You absolutely made me love css a bit today, it's exactly what I've been trying to figure out the past few days (in the end all I needed was to know :has in css).
Here is my token of gratitude (it's not gonna be a lot because of my currency, sry about that 😅)

thanks for sharing this knowledge

Another way to store the theme selection would be through the use of cookies, but that's beyond the scope of HTML/CSS, it's more of a backend solution, but that will get rid of the flashing.

my has didn't work :( doesn't seem to recognise the theme id

:Has() is not even needed for this 😅

:root:has() 🤯

Would a screen reader care about what theme is there or what is the label for that theme? :)

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.

it should be
document.onload = retrieveTheme;
or
document.onload = () => retrieveTheme();

Nice video. Thank you.
Info: You don't need to loop through all elements, when you want to apply your theme on load. You saved already the id, so you can search for the radiobutton with this id.
document.getElementById(activeTheme).checked = true;

Wow, that's such a cool "hack"!

Hi kevin, loved the tutorial.

changing the root on checked input does not seen to work on firefox to me, only currently working on chrome. Have you heard of it?

I had a really weird dream last night

If you put the JS after the form, you can set the --vars immediately/synchronously rather than in the onload, avoiding the 'FOUC'. Or if your server isnt static you can put it in a cookie, and respond with the right theme in the header

This is incredible Kevin, thank you so much. I just watched it through in 1 go. And I will watch it again slower to exactly implement the Code and try it myself. I really love your channel and videos. Just now I shared your channel with me co-workers cause at least 3-5 of us are all working, studying and learning about CSS :)

not working at all, keep getting 'name="theme"' is not a valid selector, both firefox and chrome display same error

No JS? 🤦🏻🤦🏻🤦🏻

Great again Kevin! 😎 :has... I can't wait for all browsers to fully implement it.

Thank you so much for sharing this great experience with us :) have a productive day

Awesome! Thank you for share this!!

Really cool !!

to solve the problem with jumping, you can remove the default checked property inside html, then add else {} block, and if(...) {...} else { colorThemes[0].checked = true }

This king completes people's skills. Respect.

Amazing Tutorial.

Thanks for the video!

themes not theme's

Great tutorial! 👍👍

Have you checked browser compatibility :has()

You forgot to add that fallback code to the storeTheme function as well. Without Has support you'd need to refresh the page to see the theme change. Either way, always a big fan of your videos, good work.

Using cookies as opposed to localstorage could be a way around the window.onload issue.
This would of course require the back-end renderer to do some of the job.
But it doesn't have to be more than setting the initial html class or checking the correct select option.

i coded theme switcher to my site and it didnt work on vs code but when i copied the whole thing to codepen it worked!!
idk how.... whats the problem ???
Edit: i came to know that it doesnt work on firefox but works on chrome idk why

Good One...

main.js was not getting detected. Even after adding '<script src="main.js"> </script>' to the head of index.html

Another great tutorial! 👌🏼

To fix the flash, using 'DOMContentLoaded' event instead of 'load' or put the script as inline script after the color picker element.