Website Accessibility, v2 Visuals Solution
Transcript from the "Visuals Solution" Lesson
>> 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: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: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: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: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: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: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.