Effortless Light and Dark Mode × Theme Styling

I guess drop downs,

I think, like, at a minimum now, you have to be you should be adding these to your website even if you're not,

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, giving you the

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, attribute of the meta tag,

with color scheme

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.

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.

you can you can override those. And I run into a couple browsers for quite a while.

dark light mode here, Yeah. Like a I'll leave like a React or meta

set your your variables on that div. So if if something is a dark component,

but you can also tag a specific div or section or any selector

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 Yeah. Right? It's been in Chrome

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 drop shadows, which looks like garbage as well.

which will override this. Yeah. So let me even show you. This is with most of the styling that has a name

in your application will set the browser defaults, which is black text, white background,

you visit a website that was built 50 years ago,

And what we'll show you in just a second is how you can get that to persist So you could say, yeah, in light Node, have a shadow. In dark mode, have nothing Or maybe even have a 1 pix,

So that way, you don't even have to necessarily program that in. In fact, let me even where 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

And there are some Chrome extensions that will sort of add those to websites for people because often,

Your website doesn't work in dark mode. And I was like, I don't have dark mode. And they go, oh,

Yeah. So let's let's get into how we can even take this further because And if you do the same thing in dark mode, it's going to give you a slightly

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.

default dynamically change when you you're changing your theme is to do it with a query selector.

properties for dark mode. It's gonna make your background dark. It's gonna make your text white.

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

to the the opposite.

date picker. Yeah.

it's going to give your application Let's refresh this.

Thinking in components rather than globally on the entire website.

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.

then set your, like, dash dash primary color 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

Yeah. I think Firefox only added it last year or something like that. Out. Yeah. Yeah. In 2020 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

Yeah. So no. You spelled transparent wrong.

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.

on dark JS that around

If it would be any more complex than, like, setting a the color scheme

and it's because they split a lot into 2 houses. And they often think about how we

and it's going to be light. Oh, could get out of here.

or not. I could've sworn that it was only for color.

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.

goof up any of the, 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.

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.

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

two, it was in Firefox.

So comment all this stuff out. While you're doing that, I'll I'll talk about that. So that color scheme property

black,

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 black, then apply this to be red.

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

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

2019? I have I have a variable on my own website called I'm going to faint,

a value of a shadow, you could

you see these, like, yeah, like, these, like, wispy ESLint

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.

they increase the base color from black to something that is lighter,

crossed out. Hover over top of the exclamation mark.

In a light only context, the foreground is black And where I have because I I'm using the light Yarn functions to say, hey. The background,

And the code that we did for the always dark and always light zones is exactly what I showed you before 1 pix

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.

and extend it so that you could come up with your own color schemes because the

Alright. Well, I'm not I'm not going to,

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

Yeah. It's it's it's being

make a variable called Bos

and then a green and,

value

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.

So for the audio listeners right now, we're trying to figure out, 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

light mode is dark and in dark mode is is white, and I'm mixing it with transparent 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

Yep.

Or

either and the only oh, the light dark is newer, but the color scheme

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

Browser support for this is and that's odd that

And then the supported property value.

off of the elements. That this is not just for colors. Right? It's for setting

transparent.

none.

Did I goof something up here in the properties? 95%.

Light dark. So the box shadow in light mode

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

So I you can see that the tint or shade right here in light mode is going to give you a slightly shaded You just need to have 2 primary declarations.

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, so yeah. There JS some CSS being applied.

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,

property has also been in 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 yeah. There should be a border.

1 or 10 picks.

if you can 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, 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 white I wonder I'm gonna open it up in in Firefox right now because it's not working allows you to write light comma Yarn,

form inputs Well, you would have 1 picks, 1 picks, Yeah. If you don't know, the whole video podcast thing is an interesting territory 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.

very well supported. Right? Like, I'm just Surprisingly.

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 and then This query selector line right here is the only way I could get it to work dynamically, 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,

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

And there's no

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

instead and then pass it to box shadow.

like, what are what are some of the other themes that we have on the syntax website? 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 you're using a color mix, you're choosing the color profile, border,

Try try set a variable in light dark

Yeah. You end up kind of double defining things, especially with themes. You have to, like, reinstantiate

Yeah. And and set it to box shadow. It it should work, though.

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

there's no Bos shadow leader. What's going on here?

Yeah.

But that means it's why have we not been using this? Are you talking about color scheme? very odd. I'm wondering if if it's because I'm using so many variables and I'm sort of hot potatoing them you can just set variables

and I think that looks awful because you start getting into brown mode, which I hate.

And then for and kinds of stuff. So it's important to have a tool like Sanity monitoring your application,

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.

is going to have a value of let's do 1 pix

where you would use something other than a color.

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.

Like, the house number JS, like, 29.5, specific div. You'd even use the new CSS donut scoping so that it doesn't keep going with any nested components.

How about this?

CSS property

but I think they've done that so that you could say light comma dark comma

where, in fact, we had just color scheme only light. The only difference is I'm reassigning we'll have a light hyphen dark.

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.

pass a box shadow 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, every single color off of that 1 variable. And watch JS I change syntax or,

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.

and you're saying, I'm going to take the foreground color, which in my instance in, What you can do is you can add a meta tag Okay. That was it. It was being overwritten. One of the many, only light or only dark. And I'll show you how we can do that in a second.

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

I've committed to my color profiles, and I need something in between.

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 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,

for over 4 years. It's been in Safari. CSS what? you can like, this And, like, half the icons, GitHub JS icon is all washed out. You can't see anything.

like this.

green and red one I'm calling Santa.

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, this one, even the button is getting light text.

with mode light.

that

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

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, actual CSS here.

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 Make sure I didn't 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

so

right here, and then I'm calculating all of these darker, lighter, opaque. Mhmm. And then I am calculating 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.

because it was

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 Oh, man.

the channels of the color and say, okay. Well, I wanna take the hue

else is being calculated from that. And it's

really, really cool. So the code from that is you basically pass it to HSL, It got taken out of Chrome for a while.

you can do all of this with a single

it's pretty wild

what I had to do to get it to work nicely in syntax without doing relative color syntax was to have variables 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.

much that I I I had to, like,

can you calculate good colors?

by 1 variable,

kinda looks cool. You you can take a single color and

and add a 180 degrees to the hue of that and then just use the s and the l,

in Edge,

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

color function here and then pass it all in. I mean, you can programmatically get to good colors.

oh, I think OkayLab

and it's actually not working in You could just just transparent.

everything Let's debug it live.

style queries where the we have the ability to use a essentially, a media query based off of properties.

for was it OkayLab? Let's see if this works.

and then you give it your your color. And then what that does is it will bust up your color into the channels.

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,

The channels. Yeah.

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

and and all the other ones out there. And then you can basically take

on the root

of

which is

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.

Yes. The value 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

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

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, because this is it. Like, do you see anything wrong with my syntax here?

things that are sort of similar to them. I'm even using them in ingredients here. So,

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

It also is not working in Firefox. So it might be that the syntax has changed since I've made this demo

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 debug this live maybe.

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.

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.

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 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,

when we did the syntax is pretty fantastic.

the color scheme light, then set the background

like f f zero zero f f.

And

If I change this to light mode, Now color scheme property is actually a very fascinating property. It kind of defines what your application

The next cool thing I wanted to talk about was the section.

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.

at least these are all yeah. Let's do something obnoxious. What's a dark obnoxious color? We could do 0

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? in them or or have Literally anything. Yeah. Yes. Literally anything.

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 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,

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 will help us out. Let's even do this live, Wes. I'm gonna do a box shadow,

f f Deno zero. Node

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

to f f. Or in this case, we can do something obnoxious Yeah. To to style the text selection, all you have to do is colon colon 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 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.

because now we're getting that dark text on here. So it understands the contrast needs to be enough.

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

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 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 It's kinda frustrating.

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

theme color, you can also accept a a media tag to say if it prefers 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.

tag is or the the meta theme tag. And this only applies to 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.

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,

no, like, spec or or anything like that to 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, This color scheme property Let's turn it to light mode. There we go, folks. There you go. But Wes still have a problem of

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.

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

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.

I guess that's let's do

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.

so you can see it.

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, If you haven't seen this, it's very simple. The 1st parameter

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.

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,

any website that has a dark fav icon is, like, impossible to see. And there's

you can see it works now,

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

either theme the browser, which is what Safari and Chrome are letting us do with this meta theme color tag.

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

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

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/

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

if you wanted to, let's say, publish a video podcast for an already existing audio podcast, we had to always use, to the body 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

noodling on how that all works.

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, 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 even if we're in dark mode like we are right now.

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

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.

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.

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

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.

with selection styling,

In the past, 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.

So How about this then? 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 what was it, browser prefixes.

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.

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

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.

classic.

Peace.

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