Visuals Solution

[00:00:00]
>> Let's work through this together. I think I'm just gonna do it in two parts. So I think the first thing is reading the dark and light mode preferences. And then we'll talk about the checkbox toggle separately. So I'll go into my code, close these and open Exercise 5.

[00:00:21]
So we've got this stuff, so again, I'm just gonna use an inline style tag. So we've got this container actually we kind of need, okay, so we've got body already has a class on it of main. So let's go back to the code example. And get these media queries that we need.

[00:00:45]
Here we go, so we can just kinda grab these to see which color scheme the user prefers. So if they prefer the dark scheme then we'll set it to black, and if they prefer the light scheme then we'll set the background to white. The only differences in my example I used wrapper whereas in this we used main.

[00:01:05]
And I think the other thing that we'll just wanna do is set the color. So quite simply, if it's a dark background we'll use a light color and if it's a light background for now we use a dark color, so let's head over. Okay, so I refresh and it's black.

[00:01:19]
And then if I go into my settings and set them to white, okay, cool. So this is working, so if I change my operating system settings, the page itself changes. Yeah, so that's pretty good. And then there's a few different ways, again, not wanting to get too into the JavaScript of it all, but we could do this toggle in a few different ways.

[00:01:41]
So we wanna do something like an unclick here, right? And we'll just call a toggle function. And then we can do an inline script tag here as well as we do function toggle. And so, kind of think I had a way earlier that I thought of for this, but maybe it's not the cleanest.

[00:02:00]
I sort of think maybe we can move a lot more stuff to JavaScript if we wanted. But I think for now I made, what was I thinking? I thought of you could have an override light class. Something like that that would force the background to be white and the color, to be black.

[00:02:19]
So regardless of what div you're in, and then you could have an override dark as well, background black color white. In a front end framework, if I was using, I'd do something kind of similar in a react app. But instead of doing this stuff with CSS or whatever, I use the use state hook.

[00:02:41]
So as it updates it re renders that section, so that works really well. But in HTML, I'm just gonna add some classes for now. Okay, so toggle gets clicked, I'll do just a quick console log. Make sure I'm in here. Console toggle, okay, that's working. And then we can just do, I had sent that, yeah this code here.

[00:03:06]
So we'll want to do something like this, I think, for the toggle. So we'll be like, okay, if window match media prefers color scheme, and then we'll want to do I think like that equals light. I think that the API for the first color scheme is always with colons.

[00:03:27]
I think it's not a triple equal, I think I got that wrong. I think it's like window match media, prefers-color-scheme dark, something like that. Yeah, okay, sorry, I got the syntax wrong. So it's like if window.match media, and then you're looking for a specific value, so prefers-color-scheme is set to dark.

[00:03:49]
So then else here would be light mode is set. So I think you would want to do, let's see. I'm trying not to get too like into the code, but I was thinking about so we would want the prefers to figure out what the default is gonna be, right?

[00:04:07]
So we can do something like default theme equals. So if their default theme is dark, then we could do default theme equals dark, else we could do default theme equals light. So this way we would know in JavaScript what it would be default set to. And so then we could do, grab that main class.

[00:04:37]
So main equals document, query selector main. So this is just grabbing that body with the class of main there. Okay, so we got the thing, I'm actually gonna change this to current theme. We initially set the current theme to dark if it's in dark, or light if it's in light, That's fine and then after that then we'll do, Okay, I think we wanna do.

[00:05:23]
Just thinking this out. So we don't want to do it in the toggle necessarily, grabbing those each time, so okay. I wonder if we do currently light theme, and that is set to this window match media equals light. Okay, so do it kind of this way. So outside of the toggle class just in JavaScript, we'll grab the main thing and then we'll set this to be whether it's light or not.

[00:05:50]
And then inside the toggle, we will just do, okay, if it's currently the light theme, then we'll set it to currently light theme equals false. And if it's not, then we'll set currently, like theme equals true. And I think the last thing that we'll need to do is just grab the main that we have.

[00:06:11]
And we'll just set the class to that override that we made. There's probably some different ways to do this. I was just trying to think of something that wasn't too JavaScript intensive. All right, let's give this a whirl. So we load in and then okay. So yeah, so this is a little bit tricky.

[00:06:29]
So basically I was thinking the script loads, we'll grab the body, that's great. We'll figure out if the default was a light theme or a dark theme, right? Because we know that that default is being set by this prefers color scheme. So we store that either light or dark, so either true or false.

[00:06:43]
And then every time the toggle gets clicked, we see is it true or is it false? And if it's true, then we set it to light. And if it's false, then we set it to dark and then we flip it each time. So every time you click toggle, it should just change from black to white.

[00:07:02]
So yeah, those get a little tricky like I said, and then unlike my personal site, I have a whole nother layer of a local storage thing. Cuz right now, if you set it to white and then you refresh it, it'll go back to black because it goes back to the default.

[00:07:14]
So you even probably wanna add another layer to it. So this one gets a little confusing, but as far as reading the prefers color scheme part is very easy. Other than that, you do get into some local state and some JavaScript functionality and things like that. But yeah, it is really cool though.

[00:07:28]
I really like being able to set it. And I think it looks really slick when you visit a site and it just instantly knows that you prefer dark mode or light mode, something like that. And also, for what it's worth, I'll push all of these solutions up to GitHub repo.

[00:07:42]
So if anybody wants to see the code or anything like that later, it'll all be there.