Quick note about accessibility though:
If you just display:none; your input, you're making it unaccessible through keyboard navigation.
Just hide it behind the label instead and everyone can toggle 🎉
Then add aria-label="Switch visual theme" to your input and blind users can know what's it about.
A strange, humorous web developer that enjoys to crack lame jokes and plays the bass clarinet. Yeah, a web dev that plays an instrument! 🤯 I like to roast people 🚩
Location
United States of America
Pronouns
He, him (I'm HIM!)
Work
Owner of BurchWeb enterprises and does odd jobs. I'm poor...
Just added mine over at felixparadis.com :)
Quick note about accessibility though:
If you just
display:none;your input, you're making it unaccessible through keyboard navigation.Just hide it behind the label instead and everyone can toggle 🎉
Then add
aria-label="Switch visual theme"to your input and blind users can know what's it about.Yours must be the coolest dark/light button I've seen! I suppose you used custom CSS other than the one in the tutorial?