00:00:02 Apparently, we developers love dark mode.

00:00:05 A recent study on medium.com reveals that more than 70% of software engineers decide to use the dark mode theme for their IDEs.

00:00:14 But it's not just the IDEs.

00:00:16 We love dark websites too.

00:00:18 So let me teach you how to apply styles for different themes like light and dark mode.

00:00:23 Tailwind supports dark mode natively.

00:00:25 You just have to add the dark keyword before a class.

00:00:28 Let me show you.

00:00:30 I'll create a div.

00:00:32 And this div will have a class equal to bg-white.

00:00:36 And in there, I can say something like dark mode disabled because it's white, right?

00:00:42 But now, the only thing I have to do is say on dark mode, apply a background of black.

00:00:49 And with that, we have technically enabled our dark mode.

00:00:53 But we cannot see the text.

00:00:54 So what do we have to do?

00:00:56 Well, by default, we can make the text black, but on dark mode, we can make it white by saying text-white.

00:01:04 And with that, our dark mode is working.

00:01:06 And the way it knows that I want to have my dark mode enabled is based on system or browser preferences.

00:01:12 So on your operating system or in your browser, you can try to switch to light mode.

00:01:16 My eyes hurt.

00:01:17 And immediately you'll see that this part also got changed to white.

00:01:21 Or if I decide to switch to dark mode, that's much better.

00:01:25 This has changed immediately.

00:01:28 just by prefixing the dark properties.

00:01:30 But now, often in our websites, you'll also have to create your own toggle to allow the weirdos to switch to the light mode.

00:01:37 Just kidding, I like using it sometimes too.

00:01:39 So, to make this work, we'll have to modify the configuration to include a special dark class.

00:01:44 There are two ways to toggle the dark mode manually.

00:01:47 You can use the PrefersColor scheme and override the dark variant to use your custom selector.

00:01:52 or you can use something known as a data attribute to automatically activate the theme.

00:01:57 For this demo, I'll go with the toggling dark mode manually approach that allows us to add custom directives in the CSS file just above the theme directive.

00:02:07 So let me copy this part right here.

00:02:09 And back in our playground, I'll head over to CSS and I'll add the at custom variant of dark where .dark and .dark everything turns on the dark mode.

00:02:22 If we don't specify this, the theme will automatically adapt based on the user's operating system.

00:02:27 Pretty cool, right?

00:02:28 You only need to mention this if you want to allow users to switch between the themes on their websites.

00:02:34 It's a choice you can give them.

00:02:35 So, whatever utilities or styles Tailwind provides, just add the dark before them, and you're all set.

00:02:41 Those utilities will only take effect when the theme is set to dark.

00:02:45 Otherwise, they won't have any impact.

00:02:47 Now, I prepared a very quick code example which I'll give access to somewhere below this lesson or within the GitHub Readme of this project where we have

00:02:55 a card and within that card we have an H3 and a P tag as well as a button.

00:03:00 This button has a manual JavaScript on-click handler, which simply adds a class of dark.

00:03:07 This then targets the DOM and applies that class of dark to the browser.

00:03:11 So now if you click it, you can see that we can toggle it on or off, and no longer is our theme based on the system preferences.

00:03:19 Rather, we now have an actual toggle that allows us to switch between the different themes.

00:03:24 Now, you can also notice there are some weird properties here, like Ring 1 or Ring Slate 900. Heck, there's also a shadow that we added to this element.

00:03:34 What are these properties?

00:03:35 Well, these are some special utility classes.

00:03:38 Shadows allow you to, well, very quickly add a shadow to a specific element.

00:03:43 And trust me, I don't want to teach you what each and every single property does.

00:03:47 This lesson would be too long and you wouldn't remember any of it.

00:03:50 Instead, if you head over to Tailwind CSS, press command K and search for any of these properties, you can immediately see what it does.

00:03:59 Just click right here, and there we go.

00:04:01 Drop Shadow MD, LG, and XL.

00:04:04 You can see it visually, and it'll even explain what it does and exactly how it works, alongside with a full reference guide to different possibilities

00:04:11 that you have with it.

00:04:12 Other than that, if you really want to learn how it works behind the scenes, you can head over to the generated CSS and find it right here.

00:04:20 Shadow XL basically applies a box shadow with predefined values.

00:04:25 So to recap, if you want to manually toggle on or off the dark theme mode, then you can add this custom variant dark, and then manually modify it using

00:04:35 JavaScript or React.

00:04:36 Or if you want to develop for both, but not allow the switch, rather take into the consideration their system preferences,

00:04:42 you can just normally say which values you want in the light mode, and then prefix the dark for the same values on the dark mode.

00:04:50 Pretty cool, right?

00:04:50 Hopefully now you know how we can implement dark themes to make the developers happy.