DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

How to Create Dark/Light Mode with React (Tailwind Styling)

Naomi Pham on September 29, 2022

As developers, we should not limit ourselves to just one thing. Let’s make our app more dynamic with both dark & light versions. There are ma...
Collapse
 
mangor1no profile image
Mangor1no • Edited on

Hi Naomi, TailwindCSS has it own way to control the dark/light color palletes base on the state, you just need to add dark: prefix before your classes. You can set the property darkMode inside tailwind.config.js file to media to support dark mode base on user OS preference, or set it to class to manually control it. More information can be found here: tailwindcss.com/docs/dark-mode.

One more thing you need is to implement a small script to handle the white screen flashing problem when the browser starts loading your page. Add a small script inside the <head> tag to block page rendering and set the theme base on current mode saved inside your localStorage. It will improve the user experience a lots, at least from my perspective πŸ‘¨β€πŸ’»

Collapse
 
naomipham_ profile image
Naomi Pham • Edited on

Hi @mangor1no, thanks so much for your comment! I have been aware of this when reading Tailwind document and will def test this out in my other projects. Also, the tip about <head> tag is great! I'm sure to implement it when trying out this option.

Collapse
 
mangor1no profile image
Mangor1no

Glad I can help :D

Collapse
 
shreyas_patel_12543 profile image
Shreyas Patel

I love this! Creating dark mode has always been super annoying for me as a freelancer, and realizing you can do it with the "dark:" media query in Tailwind is a huge win. I saw someone using Vivid (vivid.lol) to quickly create a dark mode by styling right in the browser with Tailwind - was wondering if you had any thoughts!

Collapse
 
naomipham_ profile image
Naomi Pham • Edited on

Hi Aryaman, completely agree with you there. Tailwind dark variant is awesome. And wow, Vivid is truly witchcraft! Styling Tailwind by adjusting browser!! I'm not sure if I can tell you much since i have not used Vivid before. πŸ˜… Have you tried it yet? How did it go for you?

Collapse
 
shreyas_patel_12543 profile image
Shreyas Patel

I just tried it today on a Hacktoberfest project - it's so cool. Still a little buggy in places, but for Tailwind styling it makes it so much faster. Setup instructions were a bit hidden, but I was able to install it on my project with the docs: docs.vivid.lol. You should definitely try it out - might make for a good article!

Thread Thread
 
naomipham_ profile image
Naomi Pham • Edited on

That's awesome! I will definitely give it a try in my future projects. Thanks again for recommending!

Collapse
 
hectorob91 profile image
hectorob91

It’s cool. Thank you for this.
Just a question Why do you not create the color variant as a part of the tailwind theme? Then you can use it I'm CSS with the @apply for your custom classes.
Something like this:

.dark{
@apply bg-gray-800 text-slate-200
}

I mentioned it because you can get the most from tailwind instead of only using it in the components.
😌

Collapse
 
naomipham_ profile image
Naomi Pham

Wow that's awesome to know. I just started using tailwind so i didn't know. I will apply it from now on. Thanks so much! 🀩

Collapse
 
asadanik profile image
Asad Anik

I just founding like this blog. For pre-note before working like this feature (Dark/Light) Mode ... Thank you πŸ’–πŸ’–

Collapse
 
naomipham_ profile image
Naomi Pham

That's so great to hear. Thank you, Asad! I hope it will be helpful for your project.

Collapse
 
asadanik profile image
Asad Anik

yes definitely πŸ₯°πŸ₯°.. And please keep it up

Collapse
 
jt3k profile image
Andrey Gurtovoy • Edited on

I have no doubt that with the same ease you can learn to put on pants over your head. but why do you need it?
same with tailwind, it doesn't help app development, it's just annoying

Collapse
 
naomipham_ profile image
Naomi Pham • Edited on

Hi Andrey, thanks for your comment! I guess I just like Dark mode as it looks cool and helps adjust my eyes in the evening. πŸ˜… As for Tailwind I find it really useful without having to type a bunch of CSS from the scratch in index.css file. I don't have a lot of experience in app development yet so I don't know if it will work in large-scale projects. But for me right now when working on small projects like blog or personal portfolio, I think Tailwind is great.

Also, I love CSS utility classes. One class to perform only one task. Even before Tailwind I use utility classes a lot for styling with CSS. Tailwind does not replace CSS really but it makes it easier to implement ideas in my head.

Collapse
 
darabgif profile image
Darab

This is awesome

Thanks for this

Collapse
 
naomipham_ profile image
Naomi Pham

Thanks so much, Darab! Your comment made me day!

Collapse
 
carlosjuniordev profile image
Carlos Junior

Hi Naomi, will def save this because im doing my own project

Thank you so much.

Collapse
 
naomipham_ profile image
Naomi Pham

That's so great to hear. Thank you, Carlos! 🧑

Collapse
 
mteheran profile image
Miguel Teheran

Petty clear!

Collapse
 
naomipham_ profile image
Naomi Pham

Thank you! I'm glad you find it helpful.

Collapse
 
aradwan20 profile image
Ahmed Radwan

Nice and smooth work Naomi

Collapse
 
naomipham_ profile image
Naomi Pham

Thank you!!

Collapse
 
muhammadazfaraslam profile image
Muhammad Azfar Aslam

Good article for beginners to understand the concept of themes. Simple and to the point.

Collapse
 
naomipham_ profile image
Naomi Pham

Thanks so much! 🧑🧑

Collapse
 
jonassanthosh profile image
Jonas

Much helpful!

Collapse
 
naomipham_ profile image
Naomi Pham

Wow, thank you so much Jonas!