light-dark() CSS Function

[00:00:00]
>> Jen Kramer: We can get a little bit more specific with our colors, and that is the next thing we're going to do. The way we're going to start that is here inside of all of our color variables here in our CSS. So we have called out a number of colors here individually.

[00:00:16]
Those colors are set to be the same no matter how your computer is configured. Whether it's configured for light mode or it's configured for dark mode, these are always going to be your colors. But now in CSS, we have the ability to create new variables with a light and a dark option for every color.

[00:00:35]
So I'm gonna show you how I set this up. So for example, by default, let me go back to my body here, and let me take out the comment that I have here in the body. So even though I'm still in dark mode right now, it's gonna look like I'm in light mode.

[00:00:55]
Because now I've actually called out my colors of platinum for the background and phonics for the text, okay? So what I'm going to do now here in my CSS variables is I'm going to set up a new variable, and I'm gonna call it ld for light dark, -background.

[00:01:16]
So this is my light dark background. And I'm going to use the light dark function. This is new in CSS, if you go to Can I use, it's got about 86% support as of this recording. Your mileage may vary, you can check it up out on caniuse.com and inside of my light dark here, I'm gonna call out my two colors.

[00:01:41]
So I'm gonna say (var(--platinum), var(--charcoal). Charcoal, do I have a charcoal? I do have a charcoal, charcoal, okay? So that's gonna be my background colors, either they're gonna be platinum or they're going to be charcoal. The way that I've set this up here in my CSS you see that I have my light color first, my dark color second.

[00:02:13]
I'm working with CSS variables, so that's the way they're written. But you could have two hex codes here. So you could have Of 000, and FFF for black and white, that would be another way that you can manage this. We're gonna take the same variable, copy this, and I'm gonna just paste that in, I'm gonna change this name to --ld-text.

[00:02:39]
Text, and I'm gonna swap these two colors more or less. This is gonna be onyx, will be the text color and then white will be the other text color, right? So it makes sense, right? If I have a white background, I want black text, if I have a black background, I want white text.

[00:03:01]
So that's what I've spelled out here. All right, now, what I need to do is actually call these variables that I've created. So, when I go to my body, here for the background color instead of calling var(--platinum), I'm gonna call the one that I want, switch, so I'm gonna say --ld-bkgd.

[00:03:23]
And for my text color, --ld-text. And so, now that will flip around my colors, again, we haven't finished calling this out everywhere, so here in the projects, the text is there, but you can't see it, okay? But it is working in spots, it's working down here in the footer, yeah?

[00:03:52]
And in my settings, I can switch back to light mode and my regular webpage is back again. So that's how we start off testing it. You can just switch your modes here at the operating system level and see how things are working, okay? How's everybody doing so far?

[00:04:14]
Relatively straightforward? Okay, now, I've kept all of my regular old color variables here. If I call platinum directly, that would be platinum would be my color no matter what color mode I'm in, whether I'm in light or dark, it's always gonna be the platinum color. It's the ones where I have two colors called here that will be responsive to flipping between light and dark mode.

[00:04:40]
So now I'm gonna set up two more of these. My colors need to switch a little bit in a couple of other spots. So let me set up these other additional variables. I'm gonna set up one, I'm gonna call --ld-projects, and I think this one has to do with the background colors on the projects.

[00:05:08]
So I'm going to start with, [COUGH] light dark with the white background. And then the second color just to show you that this works, I have a color that I haven't used yet, it's #2e313d. So I'm gonna switch my background to that color and when we're in dark mode.

[00:05:30]
And I'm also gonna set up --ld-blue. For accessibility purposes, I have checked a lot of these contrast in a color contrast checker, the blue doesn't quite work with both the light and the dark background. So now I can modify my blue a little bit to give me better contrast depending on which mode that I'm in.

[00:05:52]
And so, to do that, I'm going to do another light dark, and this one's gonna be windsurfing. Is the color that's giving me trouble, and better version here at #70DaDD0. Okay, and then we just go and we make these changes inside of our CSS. So for our projects, so here for our background color, we're gonna go to --ld-projects, all right?

[00:06:29]
And then, if I remember correctly, I think it was my SVG colors. Yeah, so instead of windsurfing here, I could do --ld-blue, right? So I just go and I just make a few tweaks here and there.
>> Jen Kramer: See how I'm doing that?
>> Jen Kramer: So I'm just gonna make a few of these changes, just show you how that's done, and then I'm gonna switch over to my finished state here.

[00:07:01]
Okay, so once I have those in place, then I can go back to my, because, again, I don't have any way of switching this yet. We're gonna code that, but we don't have any way right now. I can switch over to dark mode once again, and you see that.

[00:07:19]
So, see how that blue is a better contrast on that background? Yeah, so that was a good improvement to make, all right? How amazing and fun is that? And when you're done, it will look like this, [LAUGH]. Part of running the cooking show that we're doing here. Put the raw turkey in the oven, and we let it bake for four hours, and then we pull out the fully cooked turkey.

[00:07:47]
So there we go, here he is, after we've done all those various changes and we've set up all of our various colors. And so, I thought this down here, there are a few changes I didn't fix in my other code there. So, all right, any questions on the concept of how this light dark thing works together?

[00:08:11]
All right, so the only thing that you need in order to get this magic working at the level that we're at is configuring some of these variables using the light dark function, that's one of the things. Then the other thing was here on our HTML, we added this property called color scheme light dark.

[00:08:30]
That's it, then you just assign your variables and it all works.