Dark mode with TailwindCSS in under 7 minutes

In this video, we are going to walkthrough how to add dark mode support using TailwindCSS.
💾 Starter code: github.com/Built-With-Code/ta...
⏭️ Watch This Next: • Custom themes with Tai...
Have a question about anything in this video? Drop it in the comments!
⏰ Timecodes ⏰
0:00 - Intro
0:12 - Starter code
0:27 - Method #1: System preference
2:11 - Method #2: Custom class name
5:48 - Simple animation for mode switching
6:38 - Outro
-------------------------------
Welcome to Built With Code, a channel focused on intermediate/advanced frontend web development topics. Some of my favorite tools are Next.js, TailwindCSS, and Framer Motion. If you find value from the videos, a like and/or subscribe is much appreciated!

[@hawkdawg443]

Thanks man, that transition part is a cherry on top

[@ethan.creates]

Dope video man! Loved the transition tip and everything else was very clear!

[@dr.insane9929]

Thanks brotha, The transition was a lifesaver.

[@fulviavaz]

Amazing! Your solution is much simpler that I was trying! Thanks!

[@chadvise3308]

This was so helpful thanks for the content ❤

[@the.mackuha]

Straight to the point! Thanks man🔥

[@builtwithcode]

Thanks for watching, glad it was helpful!

[@vladanisov1689]

This was incredibly helpful, thank you my man!

[@builtwithcode]

Glad to hear it!

[@felipepadovani6263]

Excellent dude !! helped me a lot

[@DEBUGENTITY]

Loved this video.. Thanks for making this🎉

[@masoodacheampong5385]

Thank you very much, at the end, I knew you would use useState to handle the transition, so I did mine just like that.

[@francesco_gramazio]

freaking awesome, thanks mate !

[@musicworld1717]

it helped me immensly..thanks bro

[@angeline9552]

This is so helpful, thank u :)

[@sybrespect3161]

you just got a new subscriber 👍🏾

[@akshaykumar-xu2be]

Thanks bro. 💯Worth watching . just SUBSCRIBED

[@builtwithcode]

Glad it was helpful!

[@Yesterday_i_ate_rat]

Top notch content❤

[@abishekbaiju1705]

Excellent tutorial. thanks a lot

[@builtwithcode]

Glad it was helpful!

[@nisargjaiswal4264]

Suggestion for video: Keep mobile users in mind, so zoom in the code for better readability. Nice video, keep it up buddy ✌️

[@builtwithcode]

Thanks for the callout, will try to zoom in more in the future.

[@davonnev696]

Definitely doing this .,.!!

[@killiankavanagh3854]

Thanks so much man

[@adityarajawat3185]

Nice explanation

[@builtwithcode]

Thanks!

[@nested9301]

oh tailwind is awesome !!

[@tutopoints1920]

Nice One

[@AnkitKumar-dy5um]

That's super easy :)

[@abhishekchaudhary4058]

Thanks

[@it_is_random]

thx

[@ahrenwagner2993]

Great video :) Is there a way to do this without needing to prefix dark in your markup?

[@builtwithcode]

The prefix is how tailwind recognizes which styles to apply in light vs dark mode. You could leverage a "non-Tailwind" approach using CSS variables and the prefers-color-scheme CSS selector. At that point I just prefer the "dark" prefix :)

[@AhmedMohamed-hz9bs]

❤❤❤❤

[@chan4est]

Super helpful! I'm curious how you handle both use cases at once. Basically using the user's preferred theme during first site use but once the user chooses their preferred theme, it overrides their OS's preference upon every revisit. Also how do you handle images that need to be swapped out in dark mode?

[@builtwithcode]

You'll want to store the preferred theme in localStorage. If you see that the storage is empty, then default to the OS preference. For images, I imagine the best way is to have the theme stored in some sort of global state (e.g., with React Context), then dynamically set the img src based on which theme is active.

[@alexdin1565]

thanks bro please can you make your video about "Custom themes with TailwindCSS in under 9 minutes" with this ? i mean user can switch thems and change from dark and light in same time

[@nonefvnfvnjnjnjevjenjvonej3384]

so how does tailwind get the dark mode actually. does it set it to dark on the html element?

[@MyGeorge1964]

Is there is way to abstract all of the dark mode css to the tailwind config and maybe the stylesheet so that you only need to specify one variable in the html or jsx that will change depending on whether it's dark or light?

[@builtwithcode]

Yes you can definitely do this. One way is to use reusable components so you add the light and dark mode classes once in the component definition and have multiple instances. The other is in the stylesheet you can use the @apply declaration and directly use the appropriate tailwind classes in CSS.

[@pastiille7467]

merci

[@lolhp._.]

anyone know how to do the same thing but for the html tag?

[@tasfin660]

for some reason after writing * { @apply transition-colors duration-200; } this, all my other transition duration not working

[@anonymoussloth6687]

Could u do a video with dark mode using css variables - which could be extended to multiple themes

[@builtwithcode]

Thanks for the suggestion, I'll consider it for a future video.

[@Kyruu28]

So instead of using text, I chose to use icons for the toggle instead. I wonder how to add transition for the toggle icon so it can fade or spin etc. ? I've tried added transition class to the icon element but it doesn't work...

[@builtwithcode]

Framer Motion would help here to animate when one icon unmounts and another comes into view

[@cabaucom376]

What if you wanted a dropdown menu for “system”, “dark”, “light”? I would like system to be the default but if someone specifies then update accordingly.

[@builtwithcode]

The system value is stored in the `prefers-color-scheme` CSS property. In TS/JS you can check if it's dark using `window.matchMedia('(prefers-color-scheme: dark)').matches`

[@daniali4619]

Can its change multiple pages mood, i means if we set toggle btn in nav bar then how to change multiple pages dark mood i think then its not work, I'm right or not ?

[@builtwithcode]

For using across an entire website, you'll want to setup a React Context that stores the theme value, and then wrap the entire app in that context's provider. You then connect the toggle button to update the value in the context, which will propagate to other pages.

[@rayudubharani]

sir what about system default

[@ahmedahmedx9600]

What if i want also the darkmode got saved in browser when toggling the button so if its still darkmode even when page refreshed

[@builtwithcode]

You can store the active theme in local storage and read it on page load

[@nested9301]

cookies + server side rendering

[@userre85]

Which VS code theme are you using?

[@builtwithcode]

"Dark Modern" that comes with vscode

[@angeline9552]

how would you implement a site-wide light/dark mode toggle?

[@builtwithcode]

Store the state in the main App component, then apply the "dark" class in the or at the top App level.

[@martinfriday5481]

How??? I created a button component that I want to reuse across the site, how do I make it toggle the whole thing

[@maeel]

can i have a list of every vs code extension do you have for react?

[@builtwithcode]

The main ones I use in my workflow: - ES7+ React/Redux/React-Native snippets - Tailwind CSS IntelliSense - Prettier - Code formatter - Error Lens

[@maeel]

thanks a lot @@builtwithcode

[@qotibamhamed6467]

I'm experiencing an issue where, when I switch to light mode in my system, dark mode functions perfectly. However, when I enable dark mode in my system, the toggle between dark mode and light mode doesn't work. Can someone please assist me with this problem? (I replicated your steps exactly for importing dark mode in Tailwind.)

[@builtwithcode]

Hmm that's odd. Did you update the Tailwind config file to use "class" for dark mode functionality?

[@martinfriday5481]

I created a button component and applied this dark and light mode to it, but when I call the component in another component and write "dark" styles, it doesn't work, is there any way around this??

[@builtwithcode]

Did you setup dark mode in the tailwind config?

[@martinfriday5481]

@@builtwithcode yea, I did everything there, but the dark mode only applied to that button component and when I exported it to a page, it didn't affect the rest of the page

[@builtwithcode]

Are you applying the “dark” class to the root body or html tag? Tailwind should then enable dark mode for all the children

[@martinfriday5481]

@@builtwithcode I should add the dark class to the HTML?

[@martinfriday5481]

@@builtwithcode Then how will my button component toggle the dark mode on and off on button click, that's the issue

[@DrJake-dl7rg]

what if we want to refresh the page?

[@builtwithcode]

You would need to persist the state in storage, e.g., using LocalStorage.

[@DrJake-dl7rg]

@@builtwithcode yeah thanks for replying! I'm having a rough time connecting the react state and Local Storage properly and couldn't find a good tutorial about that, yours was good tho.

[@rishabhagrawal8938]

How to add one condition inside an another condition like inside dark want to add another condition . Please help it is urgent or please share Where I can talk to yo

[@builtwithcode]

What type of other condition? If it's something stored in a component variable, then in the styling class names you can use a ternary operator with the variable and use the "dark" prefixing to limit the styling to dark mode.

[@deylerdeyler6401]

does this work on next 13?

[@builtwithcode]

Yes this should work on Next 13

[@arupde6320]

be regular

[@haha-eg8fj]

In my case I don’t need to give my document a dark class name and it just works after I confige tailwind.config.ts. I don’t know why.

[@SrEdgar]

how?