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

Read full post

Mangor1no • Oct 3 '22 • 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 👨‍💻

Naomi Pham • Oct 3 '22 • 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.

Mangor1no • Oct 3 '22

Glad I can help :D

Shreyas Patel • Oct 6 '22

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!

Naomi Pham • Oct 7 '22 • 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?

Shreyas Patel • Oct 7 '22

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!

Naomi Pham • Oct 8 '22 • Edited on

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

hectorob91 • Oct 2 '22

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

Naomi Pham • Oct 3 '22

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! 🤩

Asad Anik • Oct 5 '22

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

Naomi Pham • Oct 5 '22

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

Asad Anik • Oct 6 '22

yes definitely 🥰🥰.. And please keep it up

Andrey Gurtovoy • Oct 2 '22 • 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

Naomi Pham • Oct 3 '22 • 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.