Dark Mode

[00:00:00]
>> All right so time we're gonna talk about dark mode, the nice part is this again shockingly easy just exciting. And so let's go fill up, just another thing so we can kind of play around with this. And effectively it is yet another variant. This one is dark, colon and you're gonna effectively you can do this on the body you can do this wherever you want you can assign it basically what it should do in dark mode, right?

[00:00:42]
And the great part is these days is that what is dark mana first of all that's not gonna help you that's gonna have everything but your thing in this case. So we need to make our our thing support dark mode, which is, could you go into the system preferences and do it but also you can go to the Chrome developer tools, go to elements, right?

[00:01:03]
And see this little paintbrush right here. Right here, click that thing, and you can switch it back and forth to prefer dark mode. And that is all, like, you just use the variants in this case, right? And then you can go ahead and you can switch it in between dark mode and light mode, right?

[00:01:25]
On your browser and like, it's really when dark mode is enabled, you get dark mode, right? And so a lot of times that is yeah, I have my satellite mode because I'm a person. But I haven't said to like in the evenings you know like I have no backlight setting Whereas like at nighttime is dark mode daytime is day mode.

[00:01:47]
And so that will automatically happen but let's say you wanted like for instance, they have this toggle here, what if I wanted to do that? It's totally cool, all you really need to do is go ahead into the configuration and here we can say, and not in theme, one up from there we'll say darkMode.

[00:02:13]
And I got two options here, one of them is media, which is the default mode, the other one is class, right? And this would say, like if there is a cascading class called dark, then these variants will clock in and work like that as well. So now what we can do is, we can basically, I don't have access to the body so, we'll just wrap it in a div because it's a little playpen.

[00:02:46]
I only get like the inside to work with so we'll say div and if I say class dark It's in dark mode, right? So if you wanted to toggle the class on and off with some JavaScript you can do that, let's go back to the the actual the mediocre one because it's usually the one that I prefer as well.

[00:03:09]
And so we'll go in here and we'll turn this back to prefers dark. There's a few other things that you might choose to change in here as well. And again, this is all how these selectors and variants can like stack on top of each other and give you a lot of power very quickly.

[00:03:25]
So what we should be able to do is, for instance, we could say something along the lines of we have this other one called selection, and we're gonna say. I believe that's how it works, I'm doing that from memory so that I can make it pink, right? That's all more pink, I wasn't nearly enough pink.

[00:03:54]
There we go, right? And you could do stuff like, now, dark:selection:bg-cyan, we're doing cyan, aren't we? We all feel in cyan, we'll do bg-cyan, and we'll do. Try all that. And so now depending on what mode I'm in, I can not only control the selection, but I can actually have it, like, you can begin to stack all these things on top of each other, so on and so forth.

[00:04:34]
And do some interesting things.
>> You create more modes or that just essentially creating more themes.
>> I think for the most businesses using that media that supports query, there are a few other ones in there. If I'm not mistaken, let's go check it out real quick, it's in like, this hover focus in other states.

[00:04:59]
So there are some really interesting ones that I think are useful as well, and so for instance, we were using preferred color scheme, right? Which I do believe is just the dark modifier, but on a much more serious level stuff like prefers reduced motion, right? For people with accessibility issues or high contrast right, there are other modes you can pull in for the prefers contrast like these are things based on how they have those browsers set up.

[00:05:30]
They have high contrast mode because they have a visual impairment or something along those lines. You can easily kind of just tweak all these things in your design system or in your UI and have all those things in place as well. The supports rules when I was looking for, but the other one that I actually I just learned about the other day while I was preparing for this is even viewport orientation are they in portrait or landscape, right?

[00:05:54]
You can like lay stuff out differently like there is a set of classes and tailwind for aspect ratio, right? So you could theoretically change the aspect ratio based on which way the device is being held as well, or change the layout. If you wanna have something where it's like you ever use YouTube on a mobile device where it's like small, but as soon as you turn it landscape, it takes up the full screen, you can do that, right?

[00:06:17]
In there as well. The supports rules is the one I was looking for. This is an interesting one, it's like a way to basically detect what a browser does and does not support. And it's generating CSS, this is also something you can do in regular CSS. It's just a lot easier to say, like, okay, In that line, you can basically say, do they support CSS grid or what have you, this is probably the MDNR column I'm mistaken.

[00:06:43]
As well as you can kind of like do that progressive enhancement very easily like in that same context, and I think that's, once again, incredibly powerful. So theoretically, like I'd be curious, here's all the things you can check for on the supports. I wonder if you could check that has and stuff along those lines to see what font you pick so on and so forth.

[00:07:10]
You can choose whether or not you want to do the not operator, right? Which is like very much like has right the ability to do like not this and so I'm suspect you can also do has and then you can like figure out. We see or all that stuff we were talking about before where it's like not fully supported, you can basically begin to put stuff together.

[00:07:33]
And all in the same place which again, I think is is really really powerful, I don't see has in there but there might it might be in there as well. Cool. So yeah, there's a lot of ways like stack up these various different variants. And I think that, we'll get into the some of the layout stuff, which is I think we're tailwind is a lot of times best known for.

[00:07:57]
But I the reason I spent a lot of time on this is I do think that these variants and we move into the responsive ones. Are, incredibly there have been so many things that I thought were harder, that impossibly hard but it was gonna be an afternoon. All right that just weren't and afternoon, through these features that are basically baked into the web platform, they become super easy and super easily discoverable, using tailwind, awesome.