From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,400 courses taught by industry experts.

Adding dark mode

Adding dark mode - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Adding dark mode

“

- [Instructor] It's always nice to respect a user's color preference. So far we've only seen light mode examples like the simple alert dialogue, but what if your user is using dark mode on his system or phone? Let me just switch to dark mode. I have switched to dark mode, but I'm still seeing this page in light mode. If you like to give a dark variation of the same design, you can do that also right here in the mockup using tailwinds dark variant. Let's start with the body background color, which is set to slate-100. So I will add the dark variant and then change the color, which means if the user has set their preference to dark mode, they will see this particular class that I add here. So I will set this to bg-slate-950, and because I have set to dark mode, I'm able to see this class now. Let me switch back to light mode so you can see. You see in light mode, I see slate-100 and in dark I see slate-950. Okay, let's continue. Let's change this dialogue color. Currently it's bg-white,…

Contents