 Welcome to another episode of GUI Challenges where I build interfaces my way and then I challenge you to do it your way because with our creative minds combined, we're going to find multiple ways to solve these interfaces and expand the diversity of our skills. And today we are talking about color schemes. So how do you deliver these styles? How do you enable somebody to sort of like use auto here? So my, my Chrome browser here is in the dark color scheme on Mac OS and I have a auto preference here, which is going to pull in from the system, but I could explicitly choose light, which is going to set an HTML attribute, which I use then to just pivot all the colors in one little spot. Also here for dark, you can be in a dark color scheme, but you know, explicitly ask for dark because maybe my operating system is going to change to light earlier in the day. And I still want to have the dark color scheme here, right? This is sort of like an override for the auto preference. I think there's a lot of folks who appreciate having this ability to toggle and then last dim dim is fun for in case you don't need dark and high contrast, maybe you want something dim. And that was just something I was able to change in the custom properties. Since we'd already isolated this group of colors, I could add these new color schemes pretty simply. Let's go to the debug and quarter to check out all of the different colors in one spot and talk about them really quick. Cause what I made was a surface color set, some text colors, and then a complimentary shadow. And all of them are based off of a brand and look in the light theme here. Look at the brand. Nice and vibrant. It's a light theme. It still has a hint of blue to it. Same thing with the dim brand here. The brand is much brighter and our colors all still have a sort of blue hint to them even though the contrast is much lower than it is in the light theme. And I like separating my colors out into surfaces and text colors and we're even going to refer to them in our custom properties is that way. And so let's talk about custom properties for a second and let's look at some code. I found that there was a clear separation of defining my colors. So here's all my light colors. Here's all my dark colors here. And then there was the sort of assignment of these colors to a convenient alias to be used throughout the rest of the application. So if we see here, this is where the colors first get set somewhere and root is used to target sort of the HTML element and give these aliases here some value. So right brand text one, text two, these are all the generic names. This is the sort of convenient aliases that we'll use throughout our styles. But this is what they're backed by. And they're backed by brand light, text one light, text two light. So by default, our color scheme is a light color scheme because we're giving these aliases the backing of a light color scheme. But if I come to the dark colors where the dark preference is set, all I need to do is target these colors in the root and say those generics get overwritten by the dark versions. Same thing here. If the light attribute is set on the HTML element, we're just going to change all of these colors again. Set them back to light. So throughout the application, we only have to be concerned with brand text one, text two and surface one, and then a surface shadow. We don't have to worry much beyond that about the names of all these colors, which I find sometimes I'm, you know, using a light color here and a dark color over there. And I could get really confused if I was sort of directly using these. But if you alias them, then everyone on your team uses them from one place and then you can pivot them all in one place. And that's why look, we get down here to the dim color scheme and you could essentially just copy this and paste it below, give a new color scheme a name and change all these colors to something else. So like instead of dim, you could go to vibrant. I don't know. You could make a really vibrant color scheme and go in here and assign them all to these generics. So that was a really interesting separation of there's like a, a back of the front where we're defining all of the color schemes colors, right? So this is very back end. It's very sort of like custom property CSS plumbing. That's not as usable. So what we do is we turn these into something usable by assigning them to an alias and we assign them into those aliases based on a different context. And I thought that was a really powerful way to use CSS to sort of pivot all your colors in one place. You don't have to chase them down. And we use the cascade and just the same specificity here of this is a attribute selector, which is the same as a class. And the root selector here is also the same as a class. This is a pseudo class. So both of these have the same amount of specificity, but what they change is, is we're using the cascade in order to overwrite the previous one. So we put the autos first, right? We have the default root, which is going to be prefers color scheme light or has no prefers color scheme at all. If they have prefers color scheme dark, we'll overwrite the colors on root. Same specificity comes later in the style sheet. It wins light comes later in the style sheet. So if light is found present on the HTML, it will overwrite the colors from any of the auto preferences there. And same thing with dark and dim. So we have some duplication in sort of like, right? We have duplication here. We have light, we have brand light, brand. We're assigning these all over again, the same as we did here. But we don't really have a good mechanism in CSS yet to sort of group a media query and these root elements together. And really, I didn't mind the repeating of my code because it's all sort of very self-explanatory, at least brand and brand light inside of a color scheme light selector makes a lot of sense. There's nothing confusing here. So even though it's not dry, at least it's explicit, it's declarative, and it's easy to follow. We could do some techniques though for delivering these conditionally. So maybe you'll only load, you know, dark light or dim if someone is preferring those. But anyway, that's an enhancement. Maybe you're going to do when you fork this and work on it later. That was an awful lot of code. Let's get into some more things to show you that are kind of fun in here in the DevTools. There's just a lot of fun to be had. Like for example, I'll click on the HTML root here, and we can see our colors. We can see that dark is coming in because the user is preferring color scheme dark, right? And I just like that that reads nice. When you find your styles here on the right, you're going to find that they match the thing that you get right. If I switch to dim, here's the color scheme dim. We can see them all being pivoted in one place. We can even see the whole array of colors there. And it looks really nice. That looks nice. And if you noticed, while I switch from light to dark, the inputs here are changing, right? We're getting dark and light inputs. And that's from that color scheme property right here that we're setting. Color scheme dark. If I take that off, well, it must be inheriting it here from here. And if I, there we go. So now we have those light controls. And maybe you don't want those, maybe do. But I thought that was a nice touch to put that here inside of where I'm pivoting all the other colors. A really fun thing to do is, well, we have some like global definitions, right? We have all these global colors, and we had a global hue defined. Let's go rotate that. So here's my hue at 200. If I hold shift and hold up, watch my theme. And specifically watch the brand, because the brand will be kind of telling you what's the sort of main color here. Oh, let's switch to light. So the brand is nice and bright. Yes, light, bright, right? Okay, so here it's a green brand, orange brand, red, pink, purple, blue. I just love that you can pivot the whole brand color right here just from changing the base hue. It's just so cool. And speaking of nudging things with the keyboard, I really like doing... So here, let me go to the dim color set, because when we look at this color set, look at that's 3.8, 3.86, 4.77, like they're barely passing the contrast scores. So if I click here and find that color, so I'm looking for brand dim, and I'm going to find text to dim, because I think that's what's being used here on the surface too. And look, I can see that on the brand hue. 10% saturation and 61% lightness. 61% lightness looks like I've done this trick here. So what I'm going to do is I'm going to put my cursor into surface to text in the lightness area. I'm going to hit Command Shift C, and I'm going to hover over the target. Now what I've done is DevTools thinks I'm inspecting that element, but really my keyboard focus is still on the lightness. And DevTools is so cool, it's real time going to show me my changes here. So if I hit down on the lightness, you can see as I go down, down, down, we're now into not passing. And so this is what I mean when I say bump, bump, till I pass. Oh look, and we're still in the green, and it looks like I'm actually passing with the green colors a little bit better. Here, let's get rid of this. Let's come up here in my HTML, and let's set our brand hue back to 200, I think was the base. Now if I come back into the surface too, because I think blue had a harder time passing than green did. So look, I just clicked into the lightness area. I'm hovering now. Yeah, look, it did. So we're at 65% brightness, and I need, oh, that's text too dark. And we want text too dim, text too dim. Here we go, text too dim. You're at 53. I'm pretty sure that's not passing. It is not passing, right? So I'm just going to bump, bump, till I pass. And this is what I mean. I'm going to hit up on my arrow key. Oh, look, I passed already at 54%. So text too dim could be changed to 10% and 54%. And then it would pass that contrast ratio. And so that's one of the ways I really like checking it is where I'll invoke this little tool here, hover over it, and then change lightness values until I pass. And I think that's a really nice technique. Let's also just verify, so dim was all passing. We could go dark, Command Shift C, hover over each of these to see and make sure they're passing. Lots of green check marks, lots of green check marks. The headings aren't picking up. Okay, that's fine. Hit Command Shift C again to get rid of the tool. Go to light, hit Command Shift C to bring the tool back and look at all my colors. And they look awesome, right? Okay, so this is like some of the ways that I'll scan my colors. I'll scan my colors. And if they don't pass, I'll go bump, bump, bump until I pass in the lightness and then go save that value back into my style sheet. And I have a really strong workflow that way. Let's close out DevTools and reload to make sure we get all our changes. And there's one more concept I wanted to talk about today with color. And that was a lot of the colors that I manipulated today. I didn't use functions on. I only calculated a couple of times. And I want to talk about why and when and just the way that I think about these things. So I've built a lot of color systems and I've gone really into the deep end with a lot of the color functions. And I tend to do less relative changes than I do absolute changes. And what I mean by like a relative change is something where I will use a function, right? Okay, so here's my dark brand color. I'm going to make a relative change to the saturation. I'm going to divide it by two, right? So I don't know what the saturation is. I just want it to be half because this is a dark brand color. I want something to be half as saturated. And I call that a relative change. Yeah, because you're performing an action on a channel value that could be different at any different time. And I just want half of it. Now, when I do something like this, though, where I'll say the text went dark, here's the hue. And I just straight give it some saturation and straight give it some lightness. That's what I'm calling absolute. I find these to be kind of frustrating to go calculating too heavy. Like I could be, you know, call brand lightness and divide it by eight or something or multiply it by something and try to reach a high number. But I could also just know that I want really dark text from my dark theme or I want really light text from my dark theme. And so I could just go make that absolute. And so often you'll see that I'm just using absolute values. So even though I could be calculating all of these alt values, I find that entering them in an absolute fashion is easier for me to manage. They also look nicer. Look, I don't have any weird fractions anywhere. And everything kind of feels organized. And I like working that way. And I just wanted to point out that there's this relative change. And then there's these absolute changes in my colors. And that helps me stay organized in the way that I'm changing and adjusting these things. So anyway, that was the last little bit I wanted to show you. I hope you enjoy this GUI Challenge and you feel empowered to go build color schemes in your application so that users can visit your site and just it just adapts to them. And they don't have to think about it and everyone will have a better experience because of it. It's going to go into more depth about the code and how I sort of think about this. And take care, everyone. Hope you enjoyed it. Goodbye.