Adding a Theme Switcher

[00:00:00]
>> Jen Kramer: All right, so moving on to our next step, now what we need to have is we need the way to actually change the color scheme on the web page itself. People aren't gonna know that the different color schemes are available in your operating system settings. So, we need a way to change those things on the screen itself.

[00:00:18]
And there is something really important to remember here as we go forward. If you are working in JavaScript, you are probably familiar with the concept of a JavaScript event. When something is clicked, something happens, when something is hovered, when a key is pressed, so on and so forth.

[00:00:35]
We have none of those things in CSS. All we have in CSS are states. This is the hover state. This is the state when a radio button is checked, right? This is what we have. So, in order for us to make a switcher that will work in just CSS, we probably need to leverage those particular features.

[00:00:58]
And one of the things that we have is a pseudo-class that's called checked. In other words, we can style things in a certain way if something is checked on the page. But we do not have an unchecked. [LAUGH] So we have checked, but no unchecked. So what we need now, is we need two radio buttons.

[00:01:20]
We can style a page one way if one radio button is checked. We can style a page differently if a different radio button is checked, makes sense? So, we need two radio buttons in order to make that magic happen. So, let's walk through how we would go about coding that.

[00:01:41]
>> Jen Kramer: So, here in our HTML, just before our article, let's flatten these up. I am going to add a header element, because this is kind of a header for the web page, and then inside of that header, I am going to add a field set. I'm gonna give it an ID of mode switcher as one does.

[00:02:06]
Field set is the box that goes all the way around things, so you'll see the box up here, there on the page. And of course we end that with a slash field set.
>> Jen Kramer: And then inside our field set, we can give that immediately a legend. And this is for accessibility purposes, select a color mode.

[00:02:37]
>> Jen Kramer: Okay, so all that formatting happens automatically. That's what the raw HTML looks like. And then inside of this, I'm gonna put in a div. I'm not even gonna give it a class because I'm never gonna use it for any kinda styling. This is just to group two pieces of information that we need in order to make this radio button accessible.

[00:02:58]
Thing number one is the button itself. So I'm gonna say input type equals radio.
>> Jen Kramer: And I'm gonna give it an ID, and cuz I'm creative, I'm gonna call it light, and I'm gonna give it a name of mode, and I'm gonna give it a value, value of light, okay?

[00:03:28]
So, now we have one radio button [LAUGH] And then I'll give this a legend or a label, sorry, a label for light. And this will be light.
>> Jen Kramer: All right, so the reason you do it this way, you connected the label, the word light, that you can actually read on the screen via the for attribute there, you're connecting it to the radio button, and this makes this radio button now accessible.

[00:04:06]
Rather than just a radio button hanging out in space, we know that the label is attached to that radio button, so there's our label there, called light. And if you want to give this a value of checked, by default you can do that. This is our default radio button, okay?

[00:04:24]
I'm gonna copy and paste all of that code that I just wrote.
>> Jen Kramer: And here, I'm gonna make a few changes. So this one is going to have the same input type of radio. The ID here though, is going to be dark, and the value is gonna be dark.

[00:04:47]
And it will not be checked, cuz that is bad, you only want one checked at a time. And then the label for dark will have a value of dark.
>> Jen Kramer: Okay, so just a little field set with a couple of radio buttons in it. Any questions on that?

[00:05:09]
This is a piece of HTML, it's pretty typical. You've probably run into it somewhere along the way, okay? All right, now I wanna make these two radio buttons go side by side, right? Always the next thing you wanna do. And so we wanna take a look at our parents and children.

[00:05:26]
Our field set goes all the way around everything. The legend is coded by your browser to appear where it does, actually, right on that line there. So we actually don't need to worry about that in terms of our layout. So now what I'm going to do is use Flexbox to put these two radio buttons side by side, horizontally.

[00:05:45]
We can also make this not stretch all the way across the page, we can make it a smaller box. We can have it center on mobile instead of the way it looks now. So let's add some CSS to make that happen.
>> Jen Kramer: I'm gonna scroll down to just before my media query.

[00:06:11]
>> Jen Kramer: Light/dark button.
>> Jen Kramer: Okay, so what I'm gonna do here is I'm gonna add a fieldset. So we wanna have on the page, so I don't need a class. Display of flex, flex, flow, row wrap, justify-content center, yeah? Super pretty. And then we give it a gap, 3rem.

[00:06:50]
Pushes them apart, okay? And then we can give them a max width, 300 pixels, and a margin of 0, 0, 5rem auto. [LAUGH] Okay, so that crazy thing there, the top is 0, the right is 0, the bottom is 5rem. So we've pushed down the text away from the box, and then auto would push it all the way over to, is on the left side, and push it over there.

[00:07:22]
For mobile purposes, we can make this auto-auto, and that would center it, okay? Now comes the most amazing thing ever, which is, we have these buttons here. They say light and dark mode, but they don't do anything yet, okay? So we've coded them up. They're ready to go.

[00:07:42]
Now we need to attach these radio buttons to the code that says be in the light mode or the dark mode. How do we go about doing that? The most amazing two lines of CSS you've ever seen. All right, so I'm gonna put that back up here towards the top of my document.

[00:08:01]
In fact, right after HTML. And the two most amazing lines of CSS you've ever seen are as follows, HTML has, always a good start, right? We love the has selector, and then we're gonna say our mode switcher, that's the ID of that box there, the field set. And we're doing this for purposes of the cascade, that's where we're working with the IDs here.

[00:08:32]
And then I'm going to say the light button, remember our light radio button has an ID, and we're gonna say checked. So, in other words, when the light radio button is checked in that field set, if such a thing exists anywhere here in our HTML, then we are going to say the color scheme is light.

[00:08:59]
Whoa, look at that. That's amazing, right? Okay, when I go back to my dark button, it actually did switch back to dark. But we can also write that selector as well, okay? And the reason the dark button worked here, in my case, is because I have dark mode turned on.

[00:09:21]
So if I go back to light mode and I switched to my dark button, it doesn't work anymore, okay? And that's why that didn't work. The reason is, remember, in CSS, we have a pseudo-class for checked, we do not have a pseudo-class for unchecked, okay? So what we're gonna have to do is duplicate the style, and this time we're gonna say dark checked, color scheme dark.

[00:09:53]
And now we have ability to toggle between our two color modes. [SOUND] Yay, yay. Applause, everybody, right? Isn't that amazing? That's the most fun thing we've done all day. All right, that's really amazing.
>> Speaker 2: Chat says it's a great use of has.
>> Jen Kramer: It is an amazing use of has, isn't it?

[00:10:19]
Very, very cool stuff. And of course, then we can style this up to work in responsive mode. Right now, it's just in the center. I'm actually not gonna spend any more time styling this because the next thing I know you want is you want this to be a switch.

[00:10:32]
[LAUGH] And it's not yet a switch. Are there questions as to why this works with radio buttons? Why we needed two radio buttons and the bits and pieces that make this all flow? Any questions on any of that at this point, good?
>> Speaker 2: Just impressed, they're shocked.
>> Jen Kramer: Yeah, it's so much fun, isn't it?

[00:10:56]
>> Speaker 3: Yeah, I always thought this, I did this before, but with JavaScript, I didn't know you can only do with HTML and CSS?
>> Jen Kramer: It's relatively new. So there's a bunch of things here, the light dark function, the color scheme, and has. All of these things are relatively new in the last couple of years.

[00:11:15]
So it hasn't been possible until just recently to do this with CSS. But it's a great technique, yeah? We don't need to mess with JavaScript anymore, we'll just do it in CSS now, yeah.
>> Speaker 4: Yeah, introducing a lot of good things.
>> Jen Kramer: Right, right? We're changing the color scheme, that is inherently CSS.

[00:11:36]
Why do we have to mess with JavaScript, right?