From the course: Modern CSS Techniques without JavaScript

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Switching from one color scheme to another without JavaScript

Switching from one color scheme to another without JavaScript

From the course: Modern CSS Techniques without JavaScript

Start my 1-month free trial Buy for my team

Switching from one color scheme to another without JavaScript

“

- [Instructor] While users probably love having their preferred color scheme applied, other users may want the option to switch from one to the other. Historically, this has to be done with JavaScript. However, thanks to the light/dark function and the has() pseudo class, we can also set this up with radio buttons or similar options. So as you see here in this particular code pen, I have added some radio buttons for our color mode, light and dark. And if we take a look at the HTML, I've just given this to you here in the window rather than typing all of this in, we start with a fieldset. The fieldset is that line that goes around here and it's important to include this for accessibility reasons. So we're going to give this an ID of the mode-switcher, that's what this is. And then we're going to give it a legend, once again, what is happening inside of this field, important for accessibility. We're asking to select a color mode. In here, we've then set up two radio buttons. The first…

Contents