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!

[@ethan.creates]

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

[@lestratege4]

Thank You man , simple , easy, straight to the point, dont talk too much and give what the title of the video said... thx again man...

[@razeku1332]

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

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

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

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

[@AndrewDBrown2020]

Perfect - thank you.

[@AmanMarve-ge3md]

Great Video 🔥

[@francesco_gramazio]

freaking awesome, thanks mate !

[@sybrespect3161]

you just got a new subscriber 👍🏾

[@angeline9552]

This is so helpful, thank u :)

[@iamabishekbaiju]

Excellent tutorial. thanks a lot

[@builtwithcode]

Glad it was helpful!

[@davonne007]

Definitely doing this .,.!!

[@musicworld1717]

it helped me immensly..thanks bro

[@killiankavanagh3854]

Thanks so much man

[@akshaykumar-xu2be]

Thanks bro. 💯Worth watching . just SUBSCRIBED

[@builtwithcode]

Glad it was helpful!

[@nested9301]

oh tailwind is awesome !!

[@Jishanthegodev]

Top notch content❤

[@aldrinwong6160]

simple! this helps!

[@moistmangomilkshake347]

THANK YOU

[@TOONSSTATION]

Nice

[@MostaFathi1]

There is a problem when I switch to any mode, the coloring of the texts is delayed by a greater percentage than the rest. If the range is 300, the texts will appear to be colored within 700, and this is strange. This problem only appears in the Chrome browser and the Firefox browser. Things are great there unlike Chrome.

[@saifullahkhan2685]

woooohooooooo

[@AnkitKumar-dy5um]

That's super easy :)

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

[@deelaka-24]

thank u ❤

[@adityarajawat3185]

Nice explanation

[@builtwithcode]

Thanks!

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

[@tutopoints1920]

Nice One

[@saixcode]

thanks

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

[@lawalmuktair5617]

❤

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

[@K4NEKIIIIa]

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

[@AhmedMohamed-hz9bs]

❤❤❤❤

[@tasfin660]

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

[@nonefvnfvnjnjnjevjenjvonej3384]

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

[@abhishekchaudhary4058]

Thanks

[@sad_man_no_talent]

thx

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

[@lolhp._.]

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

[@rayudubharani]

sir what about system default

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

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

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

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

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

[@userre85]

Which VS code theme are you using?

[@builtwithcode]

"Dark Modern" that comes with vscode

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

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

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

[@itsyurey]

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.

[@kruthiks5400]

Thank you man

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

[@pastiille7467]

merci

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

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

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

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

[@EswarRemoteEnginneer]

thanks