Light & Dark Mode

[00:00:00]
>> Kevin Powell: So with all of those animations, all these other things that we've done, it's all really cool. And we can do a lot of really nice user experience things with all of these. Again, some of these are progressive enhancements, so it might not work for everybody. But at least as the browsers are improving and time goes on, more and more people get access to those.

[00:00:15]
Another thing that you can do to help enhance your user experience is through some other customizations. And I wanted to talk a lot about customizations from all those custom properties we set up from the very beginning. And there's two different ways we can look at how those customizations can benefit.

[00:00:30]
One of them is so you can just turn these things into new things and have fun with it and customize it for new projects and take pieces from this and do more with them. The other one is for improving the user experience, potentially by bringing in other themes to your site.

[00:00:43]
This site is a dark theme. I'm a fan of dark themes, and I'm also gonna take this fade-in animation off, cuz I don't think it helps the user experience right now. But dark themes, a lot of people love them. A lot of people, especially long-form websites, they actually prefer light themes.

[00:00:59]
So I wanna look at how we can leverage everything we've done to easily be able just to do some quick theming. A proper light theme would require a little bit more than what we're gonna do in the time we have now, but I think it'll just highlight how easy it is to make changes.

[00:01:14]
And this could also be changes at a different level as well where if you don't like the color theme that this website has and you wanna just adjust it, it's gonna be very easy to do those types of things as well. So if we come into our base layer here, where we had all of those custom properties set up, this is really where the payoff comes from having these tokens that we have here.

[00:01:38]
And then having the more semantic properties we have down here, cuz I don't wanna necessarily touch these. I think these are great, they're gonna do their job. The only limitation we have right now is we don't really have enough colors for a light theme. So I'm actually gonna copy these and paste them right here, and come in and just change these really fast, 100, 200, 300, 400 and we don't need another 5 just to give myself some more tokens to be able to work with.

[00:02:08]
And this is where having these tokens at the top and then we use them in different ways later on. This is also why I like HSL, cuz with HSL, I can just tweak these values really easy. So maybe this is a 90%. And again, you'd wanna do a little bit more of a careful job here and come up with something that works.

[00:02:27]
I'm just eyeballing and throwing some numbers at a board right now, and we'll see what it actually will look like. So having these light browns and the dark browns in there will enable me now to be able to come in with a custom theme. And we can just use a media query for this.

[00:02:44]
So let's come down here where we have this version of everything, which is our default theme, and I'm gonna include it. I'll do it after the colors and before. No, I'll just do it at the bottom, cuz it'll break the syntax highlighting, if not. So @media and we can do we prefers-color-scheme.

[00:03:05]
And because my system is set to dark, I'm gonna put this to light. We already created the dark theme, the default is the dark theme. So we're gonna say light right there. So it just depends on the operating system level at this point. If the operating system is set to a light theme, they'll get the light colors we're gonna create.

[00:03:20]
If it's set to the dark theme, they get the default ones we've already done. The one thing I will caveat with this is if you're going to actually create a separate theme, the media query is probably not enough, cuz a lot of people like dark themes, but prefer reading long form in light themes.

[00:03:34]
So having a manual toggle to go back and forth between them is probably something you'd wanna do, simple button toggle somewhere on your site that you could add, just a JavaScript class. Then that goes on the body that toggles between the two, and it just changes the custom properties the same way we're changing them now.

[00:03:53]
And then we could just come in, let's start. We'll start with these groups here, so the background colors. And this is, again, why I like having these different levels of things. Because now in my light theme, my extra light would just be my brown-100, my light can be my brown-200, this can now be my brown-300, my brown-400 and guess that one we'd have to play with extra dark.

[00:04:21]
We'll see what happens, we'll try it at 500 again. I'm experimenting a little bit as I do this. And I don't really wanna change my system preferences right now, cuz that's a pain in the butt. It takes a little while to do, and then my whole system goes to a light theme.

[00:04:33]
So if you open up your dev tools and you push, not that, Ctrl+Shift+P, Comd+Shift+P on a Mac, you can write emulate light. And let's make that a bit bigger and try that again so we can see what we did. Ctrl+Shift+P emulate, and you can see you can actually emulate all of these different things.

[00:04:53]
So I wanna emulate a prefers-color-scheme: light, and I can see that that's actually come in, and I have a light theme on my website right now. Now, some things are a little bit broken, but hey, it's working and we've gotten some of that done. Part of the problem is the text colors, but I've only changed background colors so far.

[00:05:10]
So I could also now come up to here, grab, not those ones, but grab these right here, copy that,
>> Kevin Powell: Come down into this media query, paste those in. And now this one my text-main would probably be better off to be my brown-700. It's a nice dark brown, my high-contrast would be my clr-brown-900, let's say.

[00:05:38]
You can see some changing, actually the brand ones would probably stay the same. So we can stick with those, and you can see it's not the nicest site in the world, but it's looking a little bit better. There's a few problems that have come up by doing this, we'll look at how we can address what these are.

[00:05:53]
But you can see quickly we're coming through and being able to theme things. I am actually gonna change another one here, which is that background accent. I think we'll change it to the var,
>> Kevin Powell: No maybe that wouldn't work. Let's just go look fast.
>> Kevin Powell: The dark and the light naming here still makes sense, but we'd almost wanna inverse them, I'm not gonna do it for now.

[00:06:20]
But it's the type of thing where you start seeing these different areas, and we'll look at how we can solve this problem with the dark text here anyway, cuz we have the same problem that's happening here. But it just shows for these other areas where we had those other background colors, we can quickly come in, we can quickly retheme it, but we're not changing those other values that were at the top.

[00:06:37]
We leave all of those tokens alone that we created here. And we're just reusing them in different ways, and it opens up the easy way to add all of the customizations that we need. Maybe you need a few extra tokens, cuz you need lighter or darker colors to work with along the way.

[00:06:52]
But by having this split, it means I can change my background color without changing what brown-900 is. Cuz if I change brown-900, it could have big ramifications across my entire site. Whereas if I'm only changing that one variable in this one situation, it just makes it a little bit easier to work with.

[00:07:08]
And you get that separation, so you can have a lot more customization in how you're doing things. So to that end, actually, it probably would be worth coming in here and again, creating a few more variables. So I'd encourage you, once we're done with this course, to come through and potentially build out one or multiple other themes, or just change the default theme.

[00:07:29]
If you don't feel like doing it, but trying to leave as many of these here as they already are. And then just coming through and making some changes or creating new tokens if you need them, I'm gonna make a lighter one here. Let's say this is 69, something like that.

[00:07:46]
So then what I could do is in my light theme, we get down to there. The background-accent-main could actually go to one of the lighter colors, just so everything gets a little bit easier to read. So let me make color green-300 just as an example. I don't think that would be the value I'd wanna keep in this situation, that's my dark one, actually, right?

[00:08:12]
Let's just say dark, there we go. So we can quickly just come in and make a change to that so we're improving the readability and making sure everything works. And so one of the problems that can come with these types of things, though, when you've switched your dark theme and everything could be looking pretty good.

[00:08:25]
But you run into these situations where some of the text you don't actually want it to be changed. So you can see here where we can't read the text in my hero, cuz it has a dark background image, and the text going dark could potentially be problematic. So one way that we can deal with that is instead of, and this could be something you set up from the beginning or it could just be on a case by case basis, depending on how you're doing things.

[00:08:47]
But in, let's go find, or here's the hero right here where I have the color, and this is the color of my text that's coming through right now. And what we could do is have this as actually two separate colors that are possible, and we can do that through a light-dark, that's right here.

[00:09:04]
And in the light-dark, it's going to set the color, if it's the light, you're giving it two different colors. You're giving it the color for the light theme and the dark theme. So just to highlight how this is working, cuz it's a little bit hard to see when we have this high contrast here, but I could do this as red or blue.

[00:09:21]
And so in doing that we can see the red text is coming in. But if we were using our variables here, we could either just put them both to the dark theme. So it's gonna stick with the dark one, or I could just enforce color-scheme: dark, and then it's always going to take the darker of the colors that are there.

[00:09:37]
So depending on how you're setting things up through it, if you need to enforce different colors, the combination of using the light-dark for your colors could be really beneficial. And then you could come through and just pick the right one specific color schemes in specific places where you wanna enforce that along the way.

[00:09:55]
So for your variables as well, instead of setting them all up the way I've been doing now with the split ones, your color set always to the light and dark and then force different ones, depending on where you need those to be enforced. And so let's just fix this, so it's using our dark color or our light color, I should say.

[00:10:16]
In this case, I would actually probably just come in with the token, or another option, too, if you always need it to be a light color, is just to use the original token. If we take that off, and I take off that it's not necessarily the best way to go, but that's another simpler option too, where you can just say, in this one situation, I just need it to always be a light color.

[00:10:40]
I don't want it to switch depending on the different things. So there's a few different options you can take, find the one that you feel works best for you. So with all of that, then that's just some quick customizations that you can make. But as we looked at with our cards and with the potential for our buttons and some other things, you can definitely make a lot more customizations here.

[00:10:56]
So you can add more theming to your site, you can add more pages to the site using these things that you've been using. You can use the custom properties from there to tweak the way things look, add more custom properties into everything you've been doing along the way to tweak things even more, just to make them even more robust.

[00:11:10]
And a lot of what we've done here worked in this project, but it could be things that you take outta this project and build into other projects as well, and use them. For the equal columns, the auto fill and the auto fit, and a lot of the other things we've done the way the custom properties are set up, those are things that don't just have to live in isolation here.

[00:11:27]
And that you don't have to recreate over and over again, even if they do require a little bit of tweaking if you pull them out of this project and put them into another one. It can be a really nice template or base file that you just take to customize, do what you want with and reuse in a lot of different ways along the way.