Effortless Light and Dark Mode × Theme Styling

Welcome to Syntax on this Monday, hasty treat. We're gonna be talking all about CSS theming properties. We're gonna be talking about some things that have either come out more recently in CSS or maybe potentially are underutilized for you to better theme your applications and websites to be able to control light and dark mode and then even, like, a color system on top of that. So, we're gonna be running through a whole bunch of CSS properties that you may or may not have heard of, and we're gonna be showing code. So if you are listening to this on your podcast app and you wanna see some of what we're talking about, head on over to youtube.com, forward slash adsyntax f m, and, give this video a watch because we'll be showing some Node, and I'll make that code available to everybody in a, repo as well. My name is Scott Tolinski. I'm a developer from Denver. With me, as always, is Wes Bos. What's up, Wes? Wes should also say video is on Spotify as well. We do not support video on

all the other podcast apps just because it has to be, like, a different feed and whatnot, then you're splitting feeds, and it's kind of annoying. I I really wish they would fix that. But, yeah, certainly check out the video if you are noodling on how that all works.

Yeah. If you don't know, the whole video podcast thing is an interesting territory where if you wanted to, let's say, publish a video podcast for an already existing audio podcast, you cannot have them in the same feed. Yeah. And you end up doing 2 separate feeds, and that was like, that's not something we wanna get into. Although, Spotify allows you to attach video to a specific episode. So shout out to Spotify for actually trying to solve that problem.

I just wish it was a a global solution. Thinking about a solution to solving your bugs, well, that's where Sentry comes in. Let me let me tell you a little bit about Sentry. Sentry dot io is the perfect place to solve all of the errors and bugs that are in your application. For instance, you know, I I don't know about about you, Wes, but I tend to just think my stuff's working fine sometimes because it's working fine for me. Works works on my machine. Right? Works on my machine. Yeah. Yeah. And little do you know that there's a lot of different machines out there and configurations and kinds of stuff. So it's important to have a tool like Sanity monitoring your application, giving you the insight into what's going on on most users. Maybe there's something, messed up with a very specific user's database record or something else causing some errors in. Man, that's just hard to get visibility in, but, not with Sentry. So head on over to century.ioforward/ syntax. Sign up and get 2 months for free. Yeah. It's an incredible service. So, yeah, this podcast is presented by Sentry. Alright. Let's get into it. Wes, I'm gonna share my screen here. We can ta take a look at some some code and, all kinds of stuff.

Let me pop this open. Entire screen. Select my screen. There we go. You know, I have this little demo. It's not the most incredible looking demo. I didn't actually take very much time to get these colors dialed in. So if you're looking for something that is finely tuned, this is not necessarily colors wise. But the techniques that I'm gonna be showing here are pretty impressive because we did a whole theme system for the syntax site. And when we did that in yeah. Man, it was a while ago at this point. About a year and a half?

Yeah. It it which is crazy to say. It's a year and a half ago. But, like, like, CSS has changed so much in a year and a half that it's crazy to think that a year and a half old CSS is like, oh, now we're finally in a spot where, oh, we could use quite a bit of this. Yes. And so this is actually really interesting here because

when we did the syntax theming system, I had to do so much magic with CSS variables to get some of these features that you're gonna see that I we can now do in 1 or 2 lines of CSS.

So when we have an opportunity, we'll be able to swap a lot of this stuff out on the syntax theming, and it's all gonna get a little bit nicer. So the first thing I wanted to talk about in this episode was the theme color, which is a meta tag. Now you might be wondering about what the heck the theme tag is or the the meta theme tag. And this only applies to mobile browsers, Scott even all mobile browsers, just mobile Chrome and mobile Safari, and then it applies to desktop Safari as well. If you've ever seen a website that looks nice with this top bar up here, that is typically being done through the meta theme color. Now it automatically you'll notice I actually don't even have the meta theme color for this specific site pulled up right now, and you'll notice that it's still being styled with the black background color. So by default, you're going to get it matching your your background color. Pull it out.

Yeah. Which is great. I think that's a a wonderful thing. But if you want more control over it, what you can do is in fact, let me head to our HTML here.

What you can do is you can add a meta tag that has a name of theme color and then you give it some content. Right? The content is the color you would want. Now there is some iffy things and weird things, like, if you're in dark mode in your application Vercel, and you try to set this to be a super white background, sometimes Safari JS not playing nice with that. If you're wondering why it doesn't work, you know, there there's some caveats there in terms of, like, which actual colors you can use. But let me even, like, set this to, like, a 333.

And you can see now it's it's not matching the, background. It's it's changing the color specifically up top here. Oh, yeah. We don't even have this on the the syntax website. I don't think Wes should probably add this.

Yeah. We have the ability to, like, bookmark it and add it as an app in Safari desktop.

Yeah. But You'll notice something interesting here is when I try to change it to this green, it didn't like it because this green is see how the color contrast wants to go black text on green? It won't change it, because we have light text on top of here. But I'm I'm guessing here let me even pull up my system settings.

If I change this to light mode, you can see it works now, because now we're getting that dark text on here. So it understands the contrast needs to be enough.

So that's one interesting thing. You can see here, if I toggle back to dark mode, it goes back to I don't know why it's going to this gray, which is interesting because I didn't even set this. And there's some weird quirks of that. I'm gonna tell you this right now. I found this to to have some interesting interesting quirks going on. And and sometimes here here's a fun thing was I found, like, the only way that I could get it to dynamically change when you you're changing your theme is to do it with a query selector.

This query selector line right here is the only way I could get it to work dynamically, which makes sense, but, like, there's some what JS it, React Helmet that allows you to set meta tags and stuff like that. I wasn't able to get, like, super, super

reliable transformations. Is there anything other than that? The browser was not detecting the change? JS so that Yes. The query selector that you had is you set the Scott content attribute of the meta tag, and that's odd that

Yeah. Like a I'll leave like a React or meta so you can see it.

Meta Node sync Scott. Yeah. Like, that's all that like, a React or Yeah. Twilky would be doing. It's often really funky. It's classic Apple to try to save us from ourselves being like, you can change it. But if you're doing some, like, Myspace stuff where it's impossible to read the text, then you're not able to do it. And, also, I wish we had more control over this type of thing because I run a sort of a blue theme in all of my browsers.

And any website that has a dark fav icon is, like, impossible to see. And there's no, like, spec or or anything like that to either theme the browser, which is what Safari and Chrome are letting us do with this meta theme color tag.

Or, like, wouldn't it be nice if the browser could be told if your browser is currently in Yarn or light mode? Because I run I I know I'm gonna get some hate for this, but I often run light mode during the day and dark mode at night on my Mac Bos.

And, like, half the icons, GitHub JS icon is all washed out. You can't see anything.

It's kinda frustrating.

Yeah. You know ESLint interesting, Wes, is, I actually do that now too. I've been changing it over. The reason why I wasn't doing light mode in the day was because it reflects off my glasses when we try to record. So I set up a better touch tool automation now. So Tuesdays at 8 o'clock, it turns my mode into dark mode only for Tuesdays at 8 o'clock. Otherwise, the schedule is what it is.

Okay. So in addition to being able to do that Wes you actually do have control over and let me even make this full screen. Okay. So theme color, you can also accept a a media tag to say if it prefers the color scheme light, then set the background to f f. Or in this case, we can do something obnoxious like f f zero zero f f.

I guess that's let's do at least these are all yeah. Let's do something obnoxious. What's a dark obnoxious color? We could do 0 f f Deno zero. Node dark I don't know if they're already, like, a There we go. Like, aubergine or something like that. Well, I just did this blue where we did 4 zeros and two f's. I would imagine that if you've yeah. So in this particular case, if we're dark if we're dark mode, it's gonna be this blue. And if we're light mode, it's gonna be this purple. I guess it's purple. You could call it purple. Let's give this page a refresh. And you could see. Right? It's, like, not it didn't even take that time. I'm wondering if I, if I change it to light mode, if it will take. See, now it is giving the green, which that's because this one's overriding it. Maybe that's why. Yeah. Let's get rid of this one. Actually, let's comment that out.

Okay. That was it. It was being overwritten. One of the many, things you could have happen here. Okay. So now light Node, and then in dark mode, we have the blue. So we do have control over this light mode Vercel dark mode if we want to specifically for this JS long as the contrast ratio is correct. So that's that's pretty great. But, yeah, again, one thing that you'll want to be aware of. So this is just Node tiny little aspect.

Let's talk about some other cool things. Let me even comment these out so we can get the default ones back in here for this demo.

The next cool thing I wanted to talk about was the color scheme and the light and dark function. These things really work well together, but we're gonna first talk about the color scheme property.

Now color scheme property is actually a very fascinating property. It kind of defines what your application can work in if it's gonna be light mode or dark mode. You can also specify things as being only light mode or only dark Node, and you can do that at a root level. In fact, where we're using this right now is at a root Vercel, but you can also tag a specific div or section or any selector with color scheme only light or only dark. And I'll show you how we can do that in a second.

Thinking in components rather than globally on the entire website.

Yes. So right now, we're saying that this site can be light Yarn. And in light mode, it looks like this. And in dark mode, it looks like this.

What's cool about this is that this is kind of automatic. If you set color scheme light, dark, if your user is in dark mode, it's going to give your application default properties for dark mode. It's gonna make your background dark. It's gonna make your text white.

So that way, you don't even have to necessarily program that in. In fact, let me even

comment all this stuff out. While you're doing that, I'll I'll talk about that. So that color scheme property in your application will set the browser defaults, which is black text, white background, to the the opposite.

And there are some Chrome extensions that will sort of add those to websites for people because often, you visit a website that was built 50 years ago, you can you can override those. And I run into a couple use cases where I'm not running those on my own personal website, and I my own personal website sort of assumes, like, white background, black text in some locations. And I've gotten a lot of people be like, hey.

Your website doesn't work in dark mode. And I was like, I don't have dark mode. And they go, oh, what? And I'm like, are you running some sort of extension or something to add it? I'm like, oh, yeah. Yeah. It turns out I am. I think our the syntax email had the same issue as well. Caitlyn went and fixed that. So I think, like, at a minimum now, you have to be you should be adding these to your website even if you're not, having a light and dark mode because people will start to just oh, try to override it to add a a dark mode to yourself. So either turn off the ability to do light or dark mode with the this color scheme only light or only dark or simply just provide some good defaults,

which will override this. Yeah. So let me even show you. This is with most of the styling turned off on this site, and you can see this is what the default is for the dark mode and the light mode. I think there is maybe so yeah. There JS some CSS being applied.

I guess drop downs, date picker. Yeah.

Just the just giving you that kind of inverse contrast out of the box without you having to do anything. And and this is not I didn't have to build in a JavaScript toggle. This is giving me access to using the system, settings no matter what. Now what's really cool is that I have a method for overriding this as well. You Node, typically, on native apps, you get system, light mode, or dark mode. So we'll talk about that in a second too. But I wanna show you something really neat about this. So we were able to also, like we mentioned, define specific even sections as being light mode or dark mode only. So in this, I have a class, which is just dark.

No. Don't rewrite. I have a class, which is just dark, and even if we comment out this stuff, and I have a class which is just light. So we have only thing that's on there is color scheme only light, and this is color scheme only dark. You'll notice that the only light color scheme, while this text didn't update here, the button, which is with the default styling stuff, did in fact update. And if we change this to be, dark light mode here, this one, even the button is getting light text.

Now this is one of the situations where you're going to need to do more with your CSS to get it to behave nice, but you can have an always dark mode and an always light mode for specific dibs.

And what we'll show you in just a second is how you can get that to persist

and actually work in a way you want it to. So And but one little little tip that, I picked up from you on the syntax website is, instead of setting like, I know this is just an example where you're setting background color on a on Node. But instead of doing that, set your your variables on that div. So if if something is a dark component, then set your, like, dash dash primary color to be black and your dash dash text to be white. And what that will do is it will then scope the variables to that specific div. You'd even use the new CSS donut scoping so that it doesn't keep going with any nested components.

Yeah. So let's let's get into how we can even take this further because along with color scheme, light, dark, and being able to say only light, only dark, those types of things, we also have access to what, in my mind, is one of the cooler additions to CSS very recently. And this is the light Yarn function.

If you haven't seen this, it's very simple. The 1st parameter is the light mode. The 2nd parameter is the dark mode. So if you wanna have a very, very simple system here, you can say light, dark, var, is okay. So for light mode, the background here for us is going to be white, black, and the foreground is going to be black or white. That will cause this, as we can see here, to not only work well with what we had, but also respond like this.

And the code that we did for the always dark and always light zones is exactly what I showed you before where, in fact, we had just color scheme only light. The only difference is I'm reassigning the background to be the var b g and the color to be for, front ground. That way, it just kind of gets that variable scoped, and then it calculates the light Yarn based on that function. So it says, alright. The foreground, what is the the foreground? And I'm in a light only context. What is the foreground? Alright. Let me jump up here.

In a light only context, the foreground is black even if we're in dark mode like we are right now.

Oh, one thing about this color scheme property and the the light dark is that it's literally only light and dark. And a lot of people sorta hit the problem. They go, okay. Well, I want the ability to just do themes, you know Mhmm. Instead of light and dark. It's it's kinda limiting where it's it's only 2. And there is talk in the standards process to take this API now that it's settled and extend it so that you could come up with your own color schemes because the the color scheme CSS property allows you to write light comma Yarn, but I think they've done that so that you could say light comma dark comma syntax or, like, what are what are some of the other themes that we have on the syntax website?

Wave Race 64. Wave Race. That's the one. Yes. There's some fun ones. And you know what, Wes? The the more I've been doing this, so the more I have been separating the idea from themes in light and Yarn. Like, certain themes could be classified as a dark theme or a light theme, and that, like, brings along a certain set of, like, things, but then maybe the the colors warp maybe more based around the accents.

It's all complex stuff. But let's talk about how you can get a, like, a system or a light or dark mode. So, like, if we wanted to force light mode, Wes, all I'm doing is I'm adding a class to the body with mode light.

Yeah. So if you wanna force light mode, all you have to do is say the CSS property only light. That's what you do to force light mode. And, likewise, to force dark mode, you say only Yarn. And that could be on the the root or the, the body of your your thing. And then if you have nothing there and it's just using the light dark function, then it's going to default to your system. So, like, for instance, if I have this set to dark mode and I change my browser to light mode, which it is currently right now, you'll see that the site isn't changing at all. And this is all because the body has a class of mode dark, which just selects only dark. And the the killer feature of doing it via CSS, which is the color scheme only dark Vercel what we used to do, which is we had to add a class of dark and set a whole bunch of variables

on dark JS that now our media queries of prefers color scheme light and prefers color scheme dark, now those will will snap too. Previously, we had to do the media queries for that and and also when the body has a class of light and dark, which is really annoying. And we found on the syntax website has a lot of little edge cases.

Yeah. You end up kind of double defining things, especially with themes. You have to, like, reinstantiate things, and that can get annoying. So this is all all really great. You can see now we have our, what's what's Node is that using CSS variables, I have an always inverted zone too Mhmm. Which will always be inverted.

That's being done very simply with a class where I'm just setting the color and background, and I'm swip swapping them. Now that is a very naive kind of implementation of this, but, you know, the way that you would end up doing this is is extremely similar. You just have your things set via the foreground and background. And, again, since these are being set with the light Yarn function, it all kind of responds accordingly.

Browser support for this is very well supported. Right? Like, I'm just Surprisingly.

Yeah. Right? It's been in Chrome for over 4 years. It's been in Safari. CSS what? Yep.

2019?

Yeah. I think Firefox only added it last year or something like that. Out. Yeah. Yeah. In 2020

two, it was in Firefox.

But that means it's why have we not been using this? Are you talking about color scheme? This color scheme property and the only oh, the light dark is newer, but the color scheme property has also been in browsers for quite a while.

It got taken out of Chrome for a while.

Yeah. Okay. You Node, it's interesting. The light dark stuff kind of opens this up to me much more. I know the color scheme stuff is important, but the light dark function is where a ton of the magic happens just because you can really Sanity tune that. What is this? What is that? Gonna put a media query in every single time. You know? And you can even do that for, like, themes, which you'll see here. Like Yeah.

You can do all sorts of great, great stuff with this light, dark function. One thing I wanted to talk about before we even got off of this, light, dark function is exactly that, themes. Right? So Yeah. In addition to having a class to do, like, mode, I also have a class to do themes. So the like, a blue theme looks like this. And what's cool about this blue theme here that I have, it doesn't look great, but it also responds to light and dark mode.

And where I have because I I'm using the light Yarn functions to say, hey. The background, for light mode, have it be light blue, and the background for dark bone, have it be dark blue. And then all the stuff works, like the always light zone, the always inverted zone, the always dark zone. This all stuff all still works exactly like it did. Wes, I kid you not. This whole theme, this whole blue verse this theme, granted they're not that different, is only being done with this one line of CSS. Man. So that's the only thing that's happening here, and it's able to take that system throughout the whole thing. And, likewise, I have, like, a monotone one, which is also doing the same thing, and then a green and, green and red one I'm calling Santa.

But yeah. So this is really just it in terms of how how you get a nice theming system that works in light or dark mode, which I is honestly challenging.

Let me ask about what you're doing here is you're you're often just setting variables.

And we've been talking about just, like, color and whatnot. But, like, one of the biggest use cases in light and dark mode is you take the shadows off in dark mode off of the elements. That this is not just for colors. Right? It's for setting you can just set variables

in them or or have Literally anything. Yeah. Yes. Literally anything.

So you could say, yeah, in light Node, have a shadow. In dark mode, have nothing Or maybe even have a a a border in dark mode only. And and, you know, there's a lot of different strategies you can take for that. You could have a a faint light border in dark mode.

You just need to have 2 primary declarations.

If it would be any more complex than, like, setting a a value of a shadow, you could revert back to a a nested media query, prefers color scheme dark, and then you can swap you can throw in a bunch of CSS in there. But in most cases, this light dark will be

will help us out. Let's even do this live, Wes. I'm gonna do a box shadow, and it's going to be light. Oh, could get out of here.

Light dark. So the box shadow in light mode is going to have a value of let's do 1 pix 1 pix 1 pix, black, and then none.

And then for border, we'll have a light hyphen dark.

And for light mode, we'll have none. And then for dark mode, we'll have a 1 picks no. Get out of here. 1 pick solid white like this.

Let's see if this works.

Let's refresh this.

Make sure I didn't goof up any of the, actual CSS here.

I'm not seeing a, I'm not seeing a border on these. Alright. Because you're in dark mode.

Yeah. But yeah. There should be a border.

And there's no there's no Bos shadow leader. What's going on here? Alright. Well, I'm not I'm not going to, debug this live maybe.

Let's debug it live.

Did I goof something up here in the properties?

Yeah. It's it's it's being crossed out. Hover over top of the exclamation mark.

And then the supported property value.

Is it none? Because border is not try 0 instead of none.

Yeah.

I I think I don't think Node, the keyword, works for and same with the box shadow.

Alright. Maybe you can't use the light dark function here. I thought you I swear I did this.

Try try set a variable in light dark instead and then pass it to box shadow.

So make a variable called Bos Yeah. And and set it to box shadow. It it should work, though.

So for the audio listeners right now, we're trying to figure out, if you can pass a box shadow value or not. I could've sworn that it was only for color.

Yeah. I mean, maybe maybe you're right. It must be a color. Oh.

How about this then? How about this?

You could just just transparent.

Well, you would have 1 picks, 1 picks, 1 or 10 picks.

And then instead of light Yarn with the box shadow properties, it's either black or transparent.

Ah, yeah. Yeah. Let's see if that works.

Let's turn it to light mode. There we go, folks. There you go. But Wes still have a problem of you like, what if you wanna change the amount of box shadow on light and dark? If that's the case, you have to revert back to a prefers prefers color scheme media query. Right? Yeah. Yeah. That that that makes sense to me. Not a huge Deno, though, because in 99% of use cases like, here I am trying to find a situation where you would use something other than a color.

And I think the box shadow is probably the most common one.

Yeah. So no. You spelled transparent wrong.

Oh, man.

Okay. Now in dark mode here, we have the border being applied only in dark Node. And then in light mode, we have the box shadow instead.

Folks, if you're out there and you want to do a a box shadow in dark mode, do not do a white shadow. It's not that doesn't make any sense. Bad. It looks bad. Okay. It's Let's keep it moving. Well, let let's keep talking about that. That's one of my biggest pet peeves is

either they increase the base color from black to something that is lighter, and I think that looks awful because you start getting into brown mode, which I hate.

Or you see these, like, yeah, like, these, like, wispy ESLint white drop shadows, which looks like garbage as well.

We need a color darker than black is what we need. Oh, and and before we get off of, this specific example and talk about things like accent color and some little things like that, one of the cool things that we can do now with color mix and, actually, Wes and I just discovered that relative color was, recently added to Firefox in July before this. So relative color will be one of those cool things we'll be able to talk about as well. So one of the cool things you can do with color mix is combine 2 colors. And in this particular example, this is one of my favorite CSS values that I add to every single project, which is tint or shade.

Wes you're using a color mix, you're choosing the color profile, and you're saying, I'm going to take the foreground color, which in my instance in, light mode is dark and in dark mode is is white, and I'm mixing it with transparent 95%.

So I you can see that the tint or shade right here in light mode is going to give you a slightly shaded section.

And if you do the same thing in dark mode, it's going to give you a slightly tinted section. So it's gonna add white to the it here. So if you ever wanted something that was just a little bit lighter than the color you had or something a little bit darker, you can use color mix and mix in your whites or your blacks in here to get a tint or shade. And I use this variable all the time. This is something it's it's like a very commonly used feature. But I also usually use a, this is this funny Node. So I have one that I call tint or shade harder, which is just the same thing but more contrast.

I have I have a variable on my own website called I'm going to faint, which is the, like because, like, you you set up your grays, and then you inevitably get to the spot where you go, I need a bit more of a I need a very even more faint color. You know? Or you set up your Even more faint. Yes. Often, I I walk by houses in Hamilton that have been, like, pnpm fell development, and they have, like, a 0.5.

Like, the house number JS, like, 29.5, and it's because they split a lot into 2 houses. And they often think about how we I've committed to my color profiles, and I need something in between.

Yep. Alright. Let's keep moving on some things that you may not know about that have landed in the browser a little while ago. One of these is accent color. Accent color allows you to style the inputs for, form inputs just by giving it a color, and you can see how this works on screen with, like, it styles the checkbox for you. Or it works with radio or range or progress as well as checkbox. Now this is nice because inputs. Yeah. So many times, we're just like, alright. This native input is ugly and blue or it's gray or whatever. Let me just change it. And, you you know, by all means, I don't think this is gonna solve people wanting to style their checkboxes or things like that. But sometimes, you just wanted to match your dang theme, and you can do that with accent color. And, likewise, another one is the selection styling.

In the past, with selection styling, we had to always use, what was it, browser prefixes.

And you don't have to use browser prefixes for this anymore. So to get this selection styling Like, text selection you're talking about, not like a select drop down. Okay.

Yeah. To to style the text selection, all you have to do is colon colon selection. So it's a pseudo selector to grab the selection text. You can style it however you want, and you can also do that on any individual div for some reason if you wanted a specific div, to be styled with the text selection. But these are all things that can make your application feel more like it's your app. Right? So now we have the the the theme matching the background color. We have the text selection matching our theme. We have the ability to do light and dark mode. We have all this relative color stuff. And I guess that brings me to the the next part, which is actual relative color syntax. Now relative color syntax is super interesting, and I had no idea

this landed in, Firefox in July. I think it was, like Yeah. Late July. So this thing just hit. Alright. So here is a demo that I cooked up probably about a year ago once it once it initially hit Safari, and it's actually not working in Chrome or Edge right now. And I wonder if that's because it had changed, but, basically, watch this. So we have this color variable that's being set on the root right here, and then I'm calculating all of these darker, lighter, opaque. Mhmm. And then I am calculating every single color off of that 1 variable. And watch JS I change Yes. The value of by 1 variable, everything else is being calculated from that. And it's really, really cool. So the code from that is you basically pass it to HSL, and you say from, and then you give it your your color. And then what that does is it will bust up your color into the channels.

In my case, I'm using HSL, so I get a variable. It's not even a variable, but it's just a letter called h. A value. Yeah. A value Wes and l. And this works with RGB and, oh, I think OkayLab and and all the other ones out there. And then you can basically take the channels of the color and say, okay. Well, I wanna take the hue and add a 180 degrees to the hue of that and then just use the s and the l, as they were. And you in in this case, I'm taking the h s, and then I'm taking the lightness and increasing it. Right? You see lighter or darker values are being calculated here. So that's always the question we have on this podcast JS, can you calculate good colors? And the answer we sorta landed on is is no. Good design JS, at the end of the day, it is done by somebody with a good eye for design. However, you can like, this kinda looks cool. You you can take a single color and calculate things that are sort of similar to them. I'm even using them in ingredients here. So, it's pretty wild that you can do all of this with a single color function here and then pass it all in. I mean, you can programmatically get to good colors.

I do think there is some of that, but you can't just have it be automatic. So, like, what you're showing here, the relative color syntax would have cleaned up our syntax CSS so much that I I I had to, like, what I had to do to get it to work nicely in syntax without doing relative color syntax was to have variables for was it OkayLab? The channels. Yeah.

Was it oh, I did LCH. I'm sorry. I had to have I had to have variables for each the the lightness, the the chroma, and the whatever whatever the LCH is and the hue. So I had to have variables for each of those, and then that just ends up exploding your CSS file. It becomes a giant pain, and you can really have, like, a not like trouble with it, but it definitely isn't as streamlined as something like this is. So I I'm this is one of my one of the things I'm most excited about. So the fact that I just learned this morning that it landed in Firefox in July is pretty fantastic.

I wonder I'm gonna open it up in in Firefox right now because it's not working in Edge, which is very odd. I'm wondering if if it's because I'm using so many variables and I'm sort of hot potatoing them around because this is it. Like, do you see anything wrong with my syntax here?

I don't think so. It's a little fuzzy to me, so I cannot see it. Oh, okay.

It also is not working in Firefox. So it might be that the syntax has changed since I've made this demo because it was relatively new when I made the demo. It just hit Safari. What I mean looks fine to me. I'll just leave it at the fact that it might be because it's a different syntax, but I'll I'll dip into it after this.

Alright. Cool. Well, Node more thing before we get out of here. Let's talk about some cool future stuff that's coming down the line here, that will really further in aid this. So one of which is going to be, style queries where the we have the ability to use a essentially, a media query based off of properties.

That's gonna blow this whole thing wide open too in terms of the the sheer amount of combinations of these techniques that are just gonna, yep, really discover some really in pretty incredible things. Not only that, but you'll be able to use variables as that that property as well inside of style query. Essentially, giving you now conditions. If statements. Yeah. Conditions. Exactly what you just said is Yeah. We can have if statements. Or you can say, like, if something is

black, then apply this to be red.

Yeah. And, also, there's the color contrast, which we've talked about on the show, or contrast color, whatever it meant that being called. Yeah. Color contrast is gonna be great for these situations where maybe you are swapping these themes, and you could use the lighter Yarn function. And then you could, on top of that, do a color contrast. So that way, you can make sure that your theme is always going to be serving up the color that has the highest contrast ratio between whatever its specific current background is or whatever you're doing at that given time.

So you can imagine, once you get into the light Yarn function with color contrast and style queries and relative color, man, this stuff's about to blow up because even the addition of color scheme and light Yarn functions has really blown this up already. I think we're just gonna continue to see these kind of improvements.

Like I said, I'm gonna make this demo available if you want to check out, if you want to play around with it, if you want to try things and see how it's working. And, I'll put that and make sure it's available in the show notes for everyone if you're interested in seeing. Otherwise, just go experiment with the light, dark function. Let me know what kind of cool stuff you make. I wanna see what type of theming systems you're able to come up with this stuff. This is my jam, and, I'm stoked to to see all this happen. And now, Wes, I cannot wait to rewrite the theming system for the syntax website. So classic.

It's a good time for CSS. Alright. That was the tasty hasty. Thanks, everybody, for tuning in. We will catch you later.

Peace.