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?
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?
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.
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 :)
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
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...
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 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
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.
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`
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?
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.
@@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.
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.)
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 ?
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.
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
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.
Thanks man, that transition part is a cherry on top
Amazing! Your solution is much simpler that I was trying! Thanks!
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...
Dope video man! Loved the transition tip and everything else was very clear!
Thanks brotha, The transition was a lifesaver.
Straight to the point! Thanks man🔥
Thanks for watching, glad it was helpful!
Best tutorial i saw been 4 times watching same tutorial still doenst understand,, but this amazing thanks man
Thanks a lot mate. I was struggling with Dark mode in Tailwind and you made it look simple. Appreciate it👍❤
Suggestion for video: Keep mobile users in mind, so zoom in the code for better readability.
Nice video, keep it up buddy ✌️
Thanks for the callout, will try to zoom in more in the future.
Thank you very much, at the end, I knew you would use useState to handle the transition, so I did mine just like that.
Perfect - thank you.
This was so helpful thanks for the content ❤
Excellent dude !! helped me a lot
This was incredibly helpful, thank you my man!
Glad to hear it!
Loved this video.. Thanks for making this🎉
Excellent tutorial. thanks a lot
Glad it was helpful!
Great Video 🔥
freaking awesome, thanks mate !
Definitely doing this .,.!!
it helped me immensly..thanks bro
you just got a new subscriber 👍🏾
This is so helpful, thank u :)
Thanks so much man
simple! this helps!
Thanks bro. 💯Worth watching . just SUBSCRIBED
Glad it was helpful!
THANK YOU
Nice
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?
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?
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.
thank u ❤
oh tailwind is awesome !!
Great video :)
Is there a way to do this without needing to prefix dark in your markup?
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 :)
how we can make the navbar dark mode on all the pages??
Top notch content❤
so how does tailwind get the dark mode actually. does it set it to dark on the html element?
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
Which VS code theme are you using?
"Dark Modern" that comes with vscode
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...
Framer Motion would help here to animate when one icon unmounts and another comes into view
❤❤❤❤
Nice explanation
Thanks!
can i have a list of every vs code extension do you have for react?
The main ones I use in my workflow:
- ES7+ React/Redux/React-Native snippets
- Tailwind CSS IntelliSense
- Prettier - Code formatter
- Error Lens
thanks a lot @@builtwithcode
thanks
Thank you man
for some reason after writing
* {
@apply transition-colors duration-200;
} this, all my other transition duration not working
sir what about system default
how would you implement a site-wide light/dark mode toggle?
Store the state in the main App component, then apply the "dark" class in the or at the top App level.
How??? I created a button component that I want to reuse across the site, how do I make it toggle the whole thing
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??
Did you setup dark mode in the tailwind config?
@@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
Are you applying the “dark” class to the root body or html tag? Tailwind should then enable dark mode for all the children
@@builtwithcode I should add the dark class to the HTML?
@@builtwithcode Then how will my button component toggle the dark mode on and off on button click, that's the issue
Could u do a video with dark mode using css variables - which could be extended to multiple themes
Thanks for the suggestion, I'll consider it for a future video.
Thanks
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.
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`
anyone know how to do the same thing but for the html tag?
What if i want also the darkmode got saved in browser when toggling the button so if its still darkmode even when page refreshed
You can store the active theme in local storage and read it on page load
cookies + server side rendering
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?
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.
❤
That's super easy :)
Nice One
what if we want to refresh the page?
You would need to persist the state in storage, e.g., using LocalStorage.
@@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.
thx
how can i share this useState betwen the componants
If you want to share across multiple components, consider using state management such as React Context and storing the theme information there
@@builtwithcode ty
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.)
Hmm that's odd. Did you update the Tailwind config file to use "class" for dark mode functionality?
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 ?
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.
does this work on next 13?
Yes this should work on Next 13
merci
the problem with this is when you set to darkmode then you refresh the page then it will back to light
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.
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
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.
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
That's what i was thinking when i clicked the video. Instead we got the most basic approach.
be regular
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.
how?
thanks