I found your video incredibly helpful, thank you. I have a question though, in your example is possible to change the theme on the same page, I'm struggling to implement this functionality on other page, (ie toggleTheme.tsx) to load on the whole app the moment it changes the color. Currently, the theme updates across the entire app only upon page refresh, rather than dynamically. Do you happen to have a project that addresses this, or could you enlighten me on how to do it?
Good question. You may want to have your theme set up high up in your React tree, and use the Context API to share the theme's setting across pages. react.dev/learn/passing-data-deeply-with-context
well skies. I'm from Nigeria. what if i wanted to use a color palette to randomly selected. anything colors what then do i do ? in your case you only did an array of three colors const colors = ['green', 'yellow', 'red`'] const modes = ['light', 'dark']
I would probably handle this by defining all the colors you want to support, and use JavaScript to handle randomly selecting from the list of colors you support.
Because using the CSS variables allows you to change the themes dynamically. As far as I know, there's not a way to do this in the Tailwind config alone.
Awesome - just what i needed,,, cheers
Just what I needed. This is amazing. Thank you.
Glad it helped
i hope you the best
🙏
Thank you sooooo much!
You’re welcome. Thanks for watching
This video helped me a lot, thank you.
Glad it helped! Thanks for the feedback.
Damn nice tutorial.
Thank you, I’m glad you liked it.
I found your video incredibly helpful, thank you. I have a question though, in your example is possible to change the theme on the same page, I'm struggling to implement this functionality on other page, (ie toggleTheme.tsx) to load on the whole app the moment it changes the color. Currently, the theme updates across the entire app only upon page refresh, rather than dynamically. Do you happen to have a project that addresses this, or could you enlighten me on how to do it?
Good question. You may want to have your theme set up high up in your React tree, and use the Context API to share the theme's setting across pages. react.dev/learn/passing-data-deeply-with-context
@@SkiesDev Fun fact I was doing some research last week and found out that in fact useContext is better suited for this case. Thanks bro
and I love the tutorial, I hope work on my project
Thanks! Glad you liked it. Good luck with your project. Let me know how it goes.
Thank you!
well skies. I'm from Nigeria. what if i wanted to use a color palette to randomly selected. anything colors what then do i do ? in your case you only did an array of three colors const colors = ['green', 'yellow', 'red`']
const modes = ['light', 'dark']
I would probably handle this by defining all the colors you want to support, and use JavaScript to handle randomly selecting from the list of colors you support.
why do styles like bg-primary-400 not work? is it something i set up wrong or should i do something else?
Can you share a small example Gist?
i never kned className can use filter method. thanks!
👍🏻 it’s a handy way to clean up long strings of classes
why not in config file only for define theme? why you use css variable?
Because using the CSS variables allows you to change the themes dynamically. As far as I know, there's not a way to do this in the Tailwind config alone.
@@SkiesDev what do you mean by dynamicaly? what is dynamic theme changing?
@@md.mohiulislam6516 Like in the video how I can create buttons that let the user change the theme in the app.