Now that's some proper explanation, appreciate it... just 1 query though, how do you make multi-layer navbar menu with active state of parent & child ?
Hello, just want to add something if you add more themes then tailwind will have problems to know which are dark and which don't, imagine you add 'darkgreen', then TW will treat it as a regular theme, that would be troublesome because if you use (dark:text-white) then that will only be applied to the default dark theme not to the 'darkgreen', in order to tell TW about it you need to specify it in the config file. if someone needs to know the code to let tailwind know to which colors apply dark mode just let me know.
This is not a UI library to install, you can copy paste only the components you're using. With or without this you're going to need to write your components.
@@hamedbahram yeah I know I can change it but I don’t wanna mess things up that’s why I needed to be sure how to do it..any tips please🙏..I wished you covered that in your video or just guide me🙏🙏
@@dolapoajayi2156 go to the `globals.css` where we have the css variables and change the value to your colors. shadcn uses hsl colors, so you can just replace the values: ``` --foreground: 50 80% 40%; ```
sir how to add a multiple theme in next js project using shadcn? i want to multiple color theme are add in our project and user can click particular theme color than change whole theme color.
Theming in shadcn is via css variables. You can change the value of the css variables by getting a hold of the `root` element, then use `root.styles.setProperty('--primary', '240 5.9% 10%') to change the values to the selected theme.
You can have next-themes control the light and dark and create another theme toggle for the other colors. Then in your CSS you'd have light and dark class for every other theme. Does that make sense?
If anyone has issues where it wont select the correct multiple theme, make sure your custom theme is below :root. I was dumb and had it above so the root theme was constantly overriding my custom theme
I've been trying to create another plugging (next to dark/light plugging) which gonna change the color theme, but I haven't succeed so far. I can only have one color more than dark/light. Any ideas?
The theme provider adds the dark or light class that then throws this error: Prop `className` did not match. Server: "__className_3a0388 dark" Client: "__className_3a0388" Any help with a fix?
Clone my code and see what you're doing differently. For additional resource read here → github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
![[#2024MAMA] ROSÉ (로제), Bruno Mars - APT. | Mnet 241122 방송](http://i.ytimg.com/vi/dgGqD28J6aQ/mqdefault.jpg)
woow amazing you are the first one on youtube who cover theming topic thakns
My pleasure! Glad to hear that.
Been using Radix Primitives and more recently shadcn ui for a while now. frickin love em!
Absolutely 💯
Finally someone talking about custom themes...
There you have it :)
Another great tutorial, Thanks Hamed.
Thanks! I appreciate that.
Awesome ! Just discovered this channel. Thanks for the nice explanations @hamed. Go ahead Next js 💥
Thanks! Welcome to the channel.
Waw bravo high-quality content and excellent courses. Thanks Hamed well done
Thank you! welcome to the channel 🙌🏼
Well done Hamed Jan, thanks.
Thanks! Appreciate that.
Now that's some proper explanation, appreciate it... just 1 query though, how do you make multi-layer navbar menu with active state of parent & child ?
I'll have that in mind for future videos.
Excellent! Very helpful.
Glad to hear that!
amazing high-quality content, thanks !!!!
My pleasure! I appreciate that.
absolutely amazing!
Thank you!
Awesome! thank you very much, it was really helpful
Glad to hear that!
Fantastic! Thanks sir.
You're welcome!
i love it ❤🔥, can i know what is the font name used in vscode?
My pleasure! My font is Operator mono
Well done!
Thank you!
nice video bro.. keep this good work up😃😃
Thanks! I appreciate that.
it was useful for me and if you have time please make video Radix UI 😍.
For sure! Thanks for the suggestions.
Hello, just want to add something if you add more themes then tailwind will have problems to know which are dark and which don't, imagine you add 'darkgreen', then TW will treat it as a regular theme, that would be troublesome because if you use (dark:text-white) then that will only be applied to the default dark theme not to the 'darkgreen', in order to tell TW about it you need to specify it in the config file.
if someone needs to know the code to let tailwind know to which colors apply dark mode just let me know.
Wouldn't it be easier with css variables?
Hi sir, Installing this UI library increases the project/ application size?
If so is this to be concerned sir?
This is not a UI library to install, you can copy paste only the components you're using. With or without this you're going to need to write your components.
Nice video man❤..but what if I wanna use a custom orange shade and not Shadcn orange shade?any idea??
Thank you! you can change the css variable values to whatever color you wish.
@@hamedbahram yeah I know I can change it but I don’t wanna mess things up that’s why I needed to be sure how to do it..any tips please🙏..I wished you covered that in your video or just guide me🙏🙏
@@dolapoajayi2156 go to the `globals.css` where we have the css variables and change the value to your colors. shadcn uses hsl colors, so you can just replace the values:
```
--foreground: 50 80% 40%;
```
sir how to add a multiple theme in next js project using shadcn? i want to multiple color theme are add in our project and user can click particular theme color than change whole theme color.
Theming in shadcn is via css variables. You can change the value of the css variables by getting a hold of the `root` element, then use `root.styles.setProperty('--primary', '240 5.9% 10%') to change the values to the selected theme.
Sir any example? Please help me
@@brainbustergk Here is an example → css-tricks.com/updating-a-css-variable-with-javascript/
How to enable both light and dark mode on a particular color, like orange in dark and light mode. ❤😊😊
You can have next-themes control the light and dark and create another theme toggle for the other colors. Then in your CSS you'd have light and dark class for every other theme. Does that make sense?
@@hamedbahramSo I will just do .orange.dark {...}, .orange.light {...} in css?
@@hamedbahram
For light
.orange{}
For dark
.dark .orange {}
Right?
@@raymondmichael4987 Exactly!
@@d4rzk252 Exactly!
If anyone has issues where it wont select the correct multiple theme, make sure your custom theme is below :root. I was dumb and had it above so the root theme was constantly overriding my custom theme
Good point!
I've been trying to create another plugging (next to dark/light plugging) which gonna change the color theme, but I haven't succeed so far. I can only have one color more than dark/light. Any ideas?
You have to separate the theming from the light/dark mode.
how to setting Themes config in NextJs 14 by get value from api
You mean changing the css variable values in response to an API call?
@@hamedbahram I want to get color values from API to set theme
Color
How can change js html css into next.js ?
Do you know React?
@@hamedbahram yes
The theme provider adds the dark or light class that then throws this error: Prop `className` did not match. Server: "__className_3a0388 dark" Client: "__className_3a0388" Any help with a fix?
Clone my code and see what you're doing differently. For additional resource read here → github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
@@hamedbahram Cool I'll check it out. Thank you! Great videos.
@@hamedbahram The solution as far as I can tell was the use of supressHydrationWarning in the