Changing Themes with Style Queries

[00:00:00]
>> Now that you understand exactly how container queries are working in terms of size and so forth, let's take a look at how they work in terms of style. And what I would like to do now is I would like to set up a dark theme for my web page.

[00:00:17]
So you've probably done this kind of thing before where there's maybe a checkbox on the page and it's light theme by default, you check the checkbox and it turns into a dark theme. We are gonna do that as well, and we're gonna do it using container style queries.

[00:00:33]
So let's get started with that. We are going to start here with our example, as you see it here. And the first thing that I'm going to do is, as you take a look at our HTML up here on the top, we have our card-container and we have a series of cards afterwards, right?

[00:00:55]
Okay, so there's all of our cards. So far so good. Around these particular cards, what we're going to do, is we are going to add a div with a class of color-test, and we're doing this, of course, because you can't query the container. And I'm going to want to query my card-container here.

[00:01:23]
So I'm going to put in, color-test is gonna be the div that comes first. color-container is the div that comes second, and we'll close the div, of course, down here at the bottom. Alright, so that's the first thing to do. Inside of our div, we are going to add a checkbox.

[00:01:41]
So the way to do this with accessibility is to use your label element. So if you have never made accessible form elements, here's how you do it. We're gonna start with a label element. That's what I thought. We start with the label element, and we are going to give this an input type of checkbox.

[00:02:08]
And we're gonna give this an id of theme-box. And then I'm going to say, check for dark theme, Okay? And by putting the label element around your checkbox, you make the whole thing clickable. So I do not have to just hover over and check that tiny little box, I can also hover over the label and check It here as well, make sense?

[00:02:43]
And I kinda think I've put it in the wrong spot. I think I actually wanna put this checkbox inside of color-test. There we go. Or even outside of color-test. Let's put it outside of color-test. Let's put it just after the h1, Because that's prettier, okay? So so far we've got a checkbox here in place.

[00:03:16]
After that we have our div with a class of color-test, our div with a class of card-container, and then we have a whole bunch of cards, awesome. In JavaScript now, we're gonna add a little bit of code. So in the JavaScript panel, if you uncomment what's there, I will tell you all about it.

[00:03:37]
Okay, so in the JavaScript box, we are doing the following. First of all, we are gonna set up a couple of variables. I'm gonna call them checkbox, and I'm gonna call them color-test. First thing I'm gonna do is check the value of color box, and that is the id of theme-box that happens to correspond with the checkbox that I just made.

[00:03:57]
So we're gonna do a query on color-test, and I'm gonna show you what we're going to do with color-test here in a moment. We're gonna setup a custom property on that, as soon as I'm done going through this JavaScript. Then we're going to add an event listener. So we wanna listen for the checkbox, and we're just listening for change.

[00:04:14]
So we don't care if it's checked or it's not checked, we're just gonna listen for when it happens to change in time. When it does change, we're gonna run the color-theme function. And the color-theme function looks like this. So if the checkbox is already checked, okay, or if it's not checked, we're going to set it to false.

[00:04:35]
And if it is checked, we're gonna set it to true. Basically, we're just making a toggle here, that happens. And we're switching the value from false to true. You'll notice that we're testing for a thing called --dark-theme, yes? That is a CSS property. So we're actually using JavaScript to change the value of a CSS custom property, the CSS variable in this context.

[00:04:58]
So very, very cool way of using JavaScript. What I love about this particular piece of JavaScript is this is what JavaScript is for, everybody. This is not for styling. This is for, let's listen to the page. When things change on the page, let's make something happen. And it leaves all of the styling inside of our CSS.

[00:05:20]
So I am a very happy person today to write this particular JavaScript. And so when we go back into our CSS, what I'm going to do is the following. I am going to make these changes. I'm going to my color-container, we are going to set that variable --dark-theme, false, okay?

[00:05:45]
So this is the variable that we're gonna call down here in our JavaScript later, okay? That's what we're querying up here at the beginning. We're changing the value of it down here a little bit later. Make sense? Okay, and if you just do this watch so far and you put this in DevTools, you'll see that this is in fact working.

[00:06:05]
The box is changing from false to true in terms of its value, whether it's checked or not, okay? And then now to this, We will add our container style query. So @container style(--dark-theme) is true. So if it's true, what do we wanna do? We're gonna say .color-container {background-color: black; color: white}.

[00:06:50]
And now, when we check our checkbox, this should be working.
>> [CROSSTALK]
>> Is that what I did?
>> Yeah, it's supposed to be [INAUDIBLE].
>> And above.
>> Here we go. Okay, or color tests. So what I did was I put the two things together. That's what I did.

[00:07:10]
Okay, color-test. Thank you. So now it's gonna work. No, that's the container for the container query. So it is card-container.
>> Line two also color-container or card-container?
>> It is, I'm very consistent in my errors.
>> [LAUGH]
>> Okay, here we go. Now it's totally gonna work. There we go, okay?

[00:07:39]
And if we write even better HTML, we can get the whole page to do this, but I haven't written better HTML at the moment, okay? In my answer, I have it working on the whole page. Okay, so make sure that you actually write the names of your classes and the places you should write the names of your classes.

[00:08:00]
So this should be card-container is set to --dark-theme: false, and then inside of your container query, the card-container will be set to black and white for the display. That's what happened here at the end. And we can take a look at the finished version of this codepen and you'll see that we've got it working on the whole page.

[00:08:23]
Just a little bit of restructuring here of my HTML, okay? How cool is that? Okay, so we're actually using these variables here inside of CSS, something we created on the fly, this thing called dark-theme, which as we change the value with our checkbox, that's JavaScript monitoring that, then we can just load in a different set of colors here for the page.

[00:08:52]
So we go from black text and white background to the reverse. You don't always necessarily need JavaScript involved for this particular container query to work, you don't necessarily need to have custom properties that are equal to false and true. As I said, you could have, say, a custom color here.

[00:09:11]
My custom color of primary color has a value of red, then execute this particular style query. That would totally work, okay? That would be fine. You don't have to do things with false and true, but it was a really convenient thing to do in this particular example.