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

00:00:23 Tailwind supports dark modes 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 darkMode, apply a background of black.

00:00:50 With that, we have technically enabled our darkmode.

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 texts black, but on dark mode, we could make it white by saying text-white.

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

00:01:06 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 switched 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 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 Prefers Color scheme and overwrite the darker 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 themed 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 will add the at custom variant of dark where .dark and .DarkEverything turns on the dark mode.

00:02:22 If we don't specify this, the theme will automatically adapt based on that 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,

00:02:54 where we have a card, and within that card we 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 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 special utility classes.

00:03:38 Shadows allow you to, well, very quickly add a Shadow to a specific element, 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 these properties, you can immediately see what it does Just click right here

00:04:00 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 that

00:04:12 you have with it.

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

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 want develop for both, but not allow the switch, rather take into the consideration their system preferences, you could just normally say which values

00:04:44 you wanted in the light mode.

00:04:45 And then prefix the Dark for the same values on the DARK mode Pretty cool, right?

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