Dark Mode

[00:00:00]
>> Steve Kinney: There's a bunch of ways to do dark mode. The default way is there's a media query based on prefers color scheme, light or dark, which is basically. That just reads the os, right? Like if you were in dark mode in macOS or Windows, great, it'll render dark mode if you are in.

[00:00:20]
Yeah, like whatever. It'll just basically go in the operating system. The other way to handle dark mode is, is to simply have a class called dark. And if anything inherits from that class, anything under that class, it should be dark. Tailwind will let you do both out of the box.

[00:00:35]
It is going to just do the user color scheme right now. Nothing we have done so far. I mean, it works in dark mode, but it's just light. So let's talk about what that might look like. I'm going to go into I don't know, let's go back to that card list because I'm pretty sure those will break.

[00:00:55]
Really? We have to go to card. Card list is just a bunch of these cards and we can see what happens. So in the storybook, I get so angry when I change the size on it too much. I didn't write this. It's not my fault. I have this little toggle here that will change me between light and dark mode.

[00:01:16]
As you can see, that's not a good look, right? And even that darker background is actually me using dark mode in tailwind, honestly what would normally happen is it would look exactly the same. I just cheated a little bit because going to Storybook internals, I do an entire course on Storybook.

[00:01:37]
If you want to learn how to do this yourself, let's not. Anyway, can we all agree that this is a problem that needs solving? Yes, right? Making people do this in order to read the content. You're not gonna pass accessibility standards on readability like this. I think that's fair.

[00:01:58]
So we can go into that card and check out how easy this is. Okay, so we said that the BG is slate and the border is whatever. What we can do is we can say dark colon, BG slate 800. Dark colon, BG, No border, slate. I want darker, lighter.

[00:02:35]
I don't know. Let's do 700. If I don't like it, I'll swap them. It'll be fine. And we'll say dark text slate. No, the text will be white. At that point everything will be good. So put those classes in, and we can see that things work in dark mode.

[00:03:05]
Now there is a caveat out of the box. The default, as I said, A second ago and then forgot that I said it out of the box. Dark mode by Tailwind is triggered when the user the prefers color scheme is dark. And so that's like, if you ever wanna test it out yourself, you can go in the Chrome dev tools, you can, you can grab an element, you can hit this paintbrush.

[00:03:33]
I have it set to manual. So it's not gonna do anything right now, but you can like force into either one of these, and you will see that, right? The other option. Cause like that'll work, that will follow whatever the OS is doing. However, you've probably seen a lot of cases where it's like you can toggle between day and night mode or system settings, right?

[00:04:00]
And Tailwind will respect that. You just need to tell it what the thing you want to do is, right? So for example, in some cases that might just be. You put a dark class on things, right? Great. Sometimes you might have like, does GitHub have this where there's like various shades of dark, right?

[00:04:27]
And so a lot of times you might have a data attribute which is like data themedark, right? Any of these things, if you just want one of those other ones, you just need to give it some kind of. This is a custom variant. So we just changed dark to mean anytime you're in a class that you either have the class called dark or you are a child of something, and in dark mode.

[00:04:51]
And so if instead you wanted to use a data attribute, you can do like data theme equals dark, so on and so forth, right? I'm using the class one in this case. And this will then say like, hey, also trigger dark mode if they are in something, right?

[00:05:12]
And this is nice because then you do the toggle, that does involve JavaScript where then you put the class on the body and now everything is in dark mode. That way people can choose to be in dark mode even if the browser's in light. And more importantly, who can also do that really easily?

[00:05:26]
You Without either going into the dev tools or anything along those lines. And so kind of just using that dark variant, you can go ahead. And now things will automatically support light and dark mode with again, just. You treat it like responsive design, you start out in light mode, right?

[00:05:46]
I guess you could theoretically take that custom variant and make one called light and start in dark mode and then implement light mode. That's a thing, I guess. But you kind of like set that up as well and dark and light mode become super easy and you just say how things should change.

[00:06:05]
In these cases as well.