00:00 All right, so we want our dark mode to work and respond to the class of dark. So I'll remove this placeholder style attribute we had and instead add class name, dark. And the first thing we need to do is in the config file, let me collapse these crazy objects here.

00:18 What we want to do is add the dark mode here and set it to class, because by default, Tailwind will look at the OS level setting of prefers color scheme, but here we want it to work with the class. So I'm going to add dark mode and you can see this class media or selector and here we just want class. And so with that set up,

00:37 this second demo block should trigger the dark mode. And so there's the first one and second one. And just to verify that it works, let me change the border background of the card for the second one to black for dark mode. In the demo component here, the card has a background of neutral,

00:55 but I can go dark, BG, neutral, and we're going to go neutral inverted, which is black. And now you can see that the first one is light mode and second one is dark mode. But we don't want to have to manually add dark to every element to change the colors. What we're going for here

01:13 is a complete CSS variable first approach where the class names don't change at all. You just add a toggle of dark somewhere up the tree and everything that's a child will take effect and become dark mode without having to change anything. So I'll remove this dark modifier here.

01:30 And instead, what we're going to do is in a CSS file where we've defined the colors, we are going to redefine these colors inside a dark scope. We have this dark class here. And what we can do is select, use that selector, that dark to redefine CSS variables.

01:49 Oops, I should not be inside my comment. Let me remove the comment. But now inside this dark class, if I redefine the CSS variables value, that's going to be applied because it's higher in the scope. And so this is going to win. So I can basically do what Copilot is offering me to do.

02:08 And I feel like it's pretty much this, but let's not get ahead of ourselves. I'm going to copy these semantic tokens here and paste them there. But we're going to redefine these. So let's start with the BG neutral. We want to go from gray zero to gray 100.

02:26 You can see that the second one is making the card black. Next, let's do the background of the whole UI, which is this BG subtle. So color BG subtle is gray five, but now we're going to make it gray 80. Okay, so you can see things are taking shape.

02:46 And then let's go in the order. And actually worth noting, you don't have to map to a color. For example, for the highlights and accents, teal and purple, I want to change the luminance or the lightness, sorry, to 30 and 70%. So I can, in the dark mode,

03:04 instead of mapping to something else, I can redefine this. So the reason is I changed the lightness a little bit here. So it kind of looks a little bit better on dark mode than if it's using the same colors here. Then we have BG neutral that we've done. The inverted is going to go to zero. Subtle, we have already changed to 80.

03:24 And bold, we're going to go to gray five. And yeah, you can see that it's taking shape. Obviously not everything is done, so it's not looking fantastic just yet. For the borders, we're going to not really invert this, but go 40, 60, and 80. So offset it a little bit.

03:42 And for the text colors, we're going to go with zero. So white, and then 40, 60, and almost black with 90. And now that we have redefined these colors at the dark selector scope, we have our dark UI. And keep in mind, both are using the exact same markup.

04:03 This is the same demo component. We haven't changed anything outside of passing the dark class. If I remove the class here, both UIs are exactly the same. And so just adding the dark toggle makes everything go to dark mode. So this is a truly automatic dark mode.

04:22 And you might have heard that you don't always want to just flip and invert the colors. You want some more fine control. And the cool thing here is you can still, on top of it, use the dark modifier on any element and override it where you need to when you need to do a surgical precision change, however you need to.