810

August 19th, 2024 × #css#theming#light/dark

Effortless Light and Dark Mode × Theme Styling

Discussion on using CSS theming properties like color scheme, light/dark functions, accent color, selection styling, relative color syntax, and future style queries to control themes and light/dark modes.

or
Topic 0 00:00

Transcript

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 1 02:39

Theme color meta tag styles browser URL bar

Scott Tolinski

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?

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

It's kinda frustrating.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 2 10:12

Color scheme property defines light/dark mode compatibility

Scott Tolinski

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.

Wes Bos

Thinking in components rather than globally on the entire website.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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,

Scott Tolinski

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.

Wes Bos

I guess drop downs, date picker. Yeah.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Topic 3 15:33

Light/dark functions set values based on system theme

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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?

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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

Wes Bos

2019?

Scott Tolinski

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

Wes Bos

two, it was in Firefox.

Wes Bos

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.

Wes Bos

It got taken out of Chrome for a while.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

You just need to have 2 primary declarations.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

Let's see if this works.

Scott Tolinski

Let's refresh this.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

Yeah. But yeah. There should be a border.

Scott Tolinski

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.

Wes Bos

Let's debug it live.

Scott Tolinski

Did I goof something up here in the properties?

Wes Bos

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

Scott Tolinski

And then the supported property value.

Wes Bos

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

Wes Bos

Yeah.

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Wes Bos

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

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

How about this then? How about this?

Wes Bos

You could just just transparent.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Wes Bos

Yeah. So no. You spelled transparent wrong.

Scott Tolinski

Oh, man.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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%.

Scott Tolinski

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

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Topic 4 30:24

Accent color styles form inputs

Scott Tolinski

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

Scott Tolinski

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.

Topic 5 30:41

Selection styling now without prefixes

Scott Tolinski

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

Topic 6 31:20

Relative color syntax calculates shades of a color

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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?

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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.

Topic 7 35:49

Future style queries enable conditional styling

Scott Tolinski

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

Wes Bos

black, then apply this to be red.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

Peace.

Share