 Hello, my friend and friends, you probably don't want to flash bang your users like I'm going to do to you right now with a bright website, especially if they have their system color schemes set to dark. And one way that we can easily do that is just by coming on your HTML element and doing a color scheme of dark light or light dark, it doesn't really matter. And then it's going to follow the system preferences. But there is a problem with this that we're going to explore in this video. But just to show you really fast before we do that, I'm in Chrome right now. I'm just going to open up my dev tools. And then in these dev tools, if I do a control shift P, and that would be a command shift P, if you're on a Mac, you can just do an emulate. And you should hear see the you can emulate a light and dark scheme. So you can see when I switch over to the light color scheme, I'm getting the light color scheme coming through. And then I can just write emulate again, do not emulate prefers color scheme and it goes back to dark. And what this is doing is basically changing the user agent styles from being light to dark. So even with my scroll bar here, because I'm in Chrome on Windows, where we have these scroll bars that aren't the floating ones, the color shift, my background color shifts, my text shifts, everything switches over to a dark color scheme, which is fantastic. And this is really good. So what you might do in a situation like this, where you are using the system preferences is you might come in with something that looks a little bit like this, where let's just explore this. I have some default colors set up right here. And then I have this media query for prefers color scheme dark, where I'm setting up my dark colors. And then over here, I'm using the text color in the background color as custom properties. And that's just here. If I come and switch this, let's just switch my base color here really fast. Hit save. Just so we can see that it is changing. Now, this is really good, but this is still really good to have here. Because if I don't do this, you'll see it's keeping the light things for the system stuff that I haven't said any styles up for. So by doing the light and dark, we're sort of saving a step along the way. We're making it a lot easier to style things where if we forget an input or something like that along the way, at least it doesn't end up being completely the wrong color. The thing is, if you go through and you set everything up to have the option for a light and dark theme, it is considered best practice to also let your user choose their theme if they want to get away from the system preferences. You might be thinking like, why would I need to do that if the users set their preferences? Clearly, they want sites using that, but that is not the case. There's a lot of users who like a light UI theme, but like dark sites and vice versa, where there's a lot of users out there who prefer their system settings to be dark because they prefer that. But for reading, they prefer lighter backgrounds with darker text. It's just easier for them. Is it the majority of users? No, but it is a sizable amount of users. You want to let your users choose through some sort of theme switcher, and that's not complicated to set up. You can just hear I'm just using a little bit of JavaScript. I'm not going to go through this here. I'm just setting a value to my light, my dark or the system settings here. If you want to finish code, it is linked in the description. And so to take advantage of that, then what we can do is we can just come down here and repeat the themes again for our light and our dark mode. And because my JavaScript is setting those data attributes there, if I go into my light, we're going to go to a light mode. And if I go to my dark, we're going to go over to a dark mode. But I'm sure when I went to the light mode, you went, wait, what? Because here we have these things that are still following that dark color scheme. And this is the problem that I alluded to when we use this color scheme light and dark here, where it's keeping those things that I forgot to style along the way that we're setting the stage and made my life easier. Well, it's leaving those alone because my system settings are still set to dark, where my browser settings or the site setting, I guess, is now set to light. And so there's a bit of a conflict there. I'm setting my light theme, but there's a few little stragglers that are now left over, which is kind of annoying. So how do we fix that? It's really, really easy to do. If somebody chooses my data theme there, I can just say that my color scheme is now light only and hit save and everything will be using the default light settings for my user agent styles. And exactly the same way on my dark, I can come through and I can set this over to my dark. So now when I'm switching between these, it's always going to follow, including those user agent styles that were following the color scheme, which just makes my life a lot easier. And I don't get these little stragglers or other things left behind along the way. Now, as I said, the code that I wrote for this to work is linked in the description. But if you'd like more detail on creating a light and dark color scheme and getting everything working with a better looking buttons toggle type thing that we have set up right here, I have covered that in a previous video, which is right here for your viewing pleasure. And with that, I would like to thank my neighbors of awesome Andrew, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet. Just a little bit more awesome. And by the way, I have new swag. There's a few new t-shirts that are all linked just below this video if you want to check them out.