Dark mode with TailwindCSS in under 7 minutes

[@hawkdawg443]

Thanks man, that transition part is a cherry on top

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

[@ethan.creates]

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

[@TOONSSTATION]

Nice

[@tasfin660]

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

[@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

[@K4NEKIIIIa]

how we can make the navbar dark mode on all the pages??

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

[@lolhp._.]

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

[@nonefvnfvnjnjnjevjenjvonej3384]

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

[@fulviavaz]

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

[@DEBUGENTITY]

Loved this video.. Thanks for making this🎉

[@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

[@davonne007]

Definitely doing this .,.!!

[@rayudubharani]

sir what about system default

[@the.mackuha]

Straight to the point! Thanks man🔥

[@builtwithcode]

Thanks for watching, glad it was helpful!

[@01dom]

Not good to be honest, would be better to define colors and change them with css so you wouldn't have to write dark everywhere

[@danishnazirpeer3422]

That's what i was thinking when i clicked the video. Instead we got the most basic approach.

[@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 :)

[@dr.insane9929]

Thanks brotha, The transition was a lifesaver.

[@sybrespect3161]

you just got a new subscriber 👍🏾

[@AnkitKumar-dy5um]

That's super easy :)

[@killiankavanagh3854]

Thanks so much man

[@bryan_11016]

Thanks a lot mate. I was struggling with Dark mode in Tailwind and you made it look simple. Appreciate it👍❤

[@sai-code]

thanks

[@deelakaransilu814]

thank u ❤

[@tutopoints1920]

Nice One

[@sad_man_no_talent]

thx

[@AhmedMohamed-hz9bs]

❤❤❤❤

[@felipepadovani6263]

Excellent dude !! helped me a lot

[@userre85]

Which VS code theme are you using?

[@builtwithcode]

"Dark Modern" that comes with vscode

[@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

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

[@chadvise3308]

This was so helpful thanks for the content ❤

[@deylerdeyler6401]

does this work on next 13?

[@builtwithcode]

Yes this should work on Next 13

[@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?

[@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?

[@mhalwasoffice6132]

how can i share this useState betwen the componants

[@builtwithcode]

If you want to share across multiple components, consider using state management such as React Context and storing the theme information there

[@mhalwasoffice6132]

@@builtwithcode ty

[@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`

[@nested9301]

oh tailwind is awesome !!

[@francesco_gramazio]

freaking awesome, thanks mate !

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

[@akshaykumar-xu2be]

Thanks bro. 💯Worth watching . just SUBSCRIBED

[@builtwithcode]

Glad it was helpful!

[@musicworld1717]

it helped me immensly..thanks bro

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

[@angeline9552]

This is so helpful, thank u :)

[@abhishekchaudhary4058]

Thanks

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

[@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

[@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

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

[@Yesterday_i_ate_rat]

Top notch content❤

[@abishekbaiju1705]

Excellent tutorial. thanks a lot

[@builtwithcode]

Glad it was helpful!

[@vladanisov1689]

This was incredibly helpful, thank you my man!

[@builtwithcode]

Glad to hear it!

[@pastiille7467]

merci

[@adityarajawat3185]

Nice explanation

[@builtwithcode]

Thanks!

[@arupde6320]

be regular

[@kruthiks5400]

Thank you man