Dark mode with TailwindCSS in under 7 minutes

[@hawkdawg443]

Thanks man, that transition part is a cherry on top

[@fulviavaz]

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

[@razeku1332]

Best tutorial i saw been 4 times watching same tutorial still doenst understand,, but this amazing thanks man

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

[@the.mackuha]

Straight to the point! Thanks man🔥

[@builtwithcode]

Thanks for watching, glad it was helpful!

[@dr.insane9929]

Thanks brotha, The transition was a lifesaver.

[@bryan_11016]

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

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

[@felipepadovani6263]

Excellent dude !! helped me a lot

[@vladanisov1689]

This was incredibly helpful, thank you my man!

[@builtwithcode]

Glad to hear it!

[@DEBUGENTITY]

Loved this video.. Thanks for making this🎉

[@chadvise3308]

This was so helpful thanks for the content ❤

[@sybrespect3161]

you just got a new subscriber 👍🏾

[@francesco_gramazio]

freaking awesome, thanks mate !

[@akshaykumar-xu2be]

Thanks bro. 💯Worth watching . just SUBSCRIBED

[@builtwithcode]

Glad it was helpful!

[@musicworld1717]

it helped me immensly..thanks bro

[@abishekbaiju1705]

Excellent tutorial. thanks a lot

[@builtwithcode]

Glad it was helpful!

[@TusharVerma-i1k]

i created this button in navbar , now i am using this navbar in every component but the color is changing only in navbar not everywhere, how to solve this?

[@angeline9552]

This is so helpful, thank u :)

[@davonne007]

Definitely doing this .,.!!

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

[@K4NEKIIIIa]

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

[@tasfin660]

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

[@Yesterday_i_ate_rat]

Top notch content❤

[@nested9301]

oh tailwind is awesome !!

[@killiankavanagh3854]

Thanks so much man

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

[@nonefvnfvnjnjnjevjenjvonej3384]

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

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

[@aldrinwong6160]

simple! this helps!

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

[@TOONSSTATION]

Nice

[@lolhp._.]

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

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

[@adityarajawat3185]

Nice explanation

[@builtwithcode]

Thanks!

[@rayudubharani]

sir what about system default

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

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

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

[@tutopoints1920]

Nice One

[@userre85]

Which VS code theme are you using?

[@builtwithcode]

"Dark Modern" that comes with vscode

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

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

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

[@AnkitKumar-dy5um]

That's super easy :)

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

[@deelakaransilu814]

thank u ❤

[@reyu_]

the problem with this is when you set to darkmode then you refresh the page then it will back to light

[@builtwithcode]

One way around this is to store the active theme in local storage. Then every time you load the page read from there to initialize the theme.

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

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

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

[@sai-oduri]

thanks

[@abhishekchaudhary4058]

Thanks

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

[@sad_man_no_talent]

thx

[@AhmedMohamed-hz9bs]

❤❤❤❤

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

[@deylerdeyler6401]

does this work on next 13?

[@builtwithcode]

Yes this should work on Next 13

[@pastiille7467]

merci

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

[@kruthiks5400]

Thank you man

[@EswarRemoteEnginneer]

thanks