woow amazing you are the first one on youtube who cover theming topic thakns
@hamedbahram7 ай бұрын
My pleasure! Glad to hear that.
@Elliot-Dx7 ай бұрын
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 ?
@hamedbahram7 ай бұрын
I'll have that in mind for future videos.
@muhammadsetyanto3515Ай бұрын
Fantastic! Thanks sir.
@hamedbahramАй бұрын
You're welcome!
@teacookie-wynn2 ай бұрын
Finally someone talking about custom themes...
@hamedbahram2 ай бұрын
There you have it :)
@idontknowmyname23872 ай бұрын
absolutely amazing!
@hamedbahram2 ай бұрын
Thank you!
@sayedalisinasadat29085 ай бұрын
it was useful for me and if you have time please make video Radix UI 😍.
@hamedbahram5 ай бұрын
For sure! Thanks for the suggestions.
@fakhrulislamfuad80727 ай бұрын
nice video bro.. keep this good work up😃😃
@hamedbahram7 ай бұрын
Thanks! I appreciate that.
@emmanuelmantilla14655 ай бұрын
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.
@hamedbahram5 ай бұрын
Wouldn't it be easier with css variables?
@sivadhanushuppalapati40417 ай бұрын
Hi sir, Installing this UI library increases the project/ application size? If so is this to be concerned sir?
@hamedbahram7 ай бұрын
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.
@pravinshinde497919 күн бұрын
Awesome! thank you very much, it was really helpful
@hamedbahram19 күн бұрын
Glad to hear that!
@raymondmichael49877 ай бұрын
How to enable both light and dark mode on a particular color, like orange in dark and light mode. ❤😊😊
@hamedbahram7 ай бұрын
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?
@d4rzk2527 ай бұрын
@@hamedbahramSo I will just do .orange.dark {...}, .orange.light {...} in css?
@raymondmichael49877 ай бұрын
@@hamedbahram For light .orange{} For dark .dark .orange {} Right?
@hamedbahram7 ай бұрын
@@raymondmichael4987 Exactly!
@hamedbahram7 ай бұрын
@@d4rzk252 Exactly!
@fabouwes92406 ай бұрын
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?
@hamedbahram6 ай бұрын
You have to separate the theming from the light/dark mode.
@PootCoinSol2 ай бұрын
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
@hamedbahram2 ай бұрын
Good point!
@MeenaVlogs13135 ай бұрын
How can change js html css into next.js ?
@hamedbahram5 ай бұрын
Do you know React?
@MeenaVlogs13135 ай бұрын
@@hamedbahram yes
@MichaelHofweller2 ай бұрын
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?
@hamedbahram2 ай бұрын
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
@MichaelHofweller2 ай бұрын
@@hamedbahram Cool I'll check it out. Thank you! Great videos.
@MichaelHofweller2 ай бұрын
@@hamedbahram The solution as far as I can tell was the use of supressHydrationWarning in the
@zvinzv7 ай бұрын
i love it ❤🔥, can i know what is the font name used in vscode?
@hamedbahram7 ай бұрын
My pleasure! My font is Operator mono
@uixmat7 ай бұрын
Been using Radix Primitives and more recently shadcn ui for a while now. frickin love em!
@hamedbahram7 ай бұрын
Absolutely 💯
@PooyaDehghani-s1m7 ай бұрын
Well done Hamed Jan, thanks.
@hamedbahram7 ай бұрын
Thanks! Appreciate that.
@BooleanOperator6 ай бұрын
Another great tutorial, Thanks Hamed.
@hamedbahram6 ай бұрын
Thanks! I appreciate that.
@neoTriny3 ай бұрын
Awesome ! Just discovered this channel. Thanks for the nice explanations @hamed. Go ahead Next js 💥
@hamedbahram3 ай бұрын
Thanks! Welcome to the channel.
@harirasamir24364 ай бұрын
Waw bravo high-quality content and excellent courses. Thanks Hamed well done
@hamedbahram4 ай бұрын
Thank you! welcome to the channel 🙌🏼
@sattayaprata18 күн бұрын
how to setting Themes config in NextJs 14 by get value from api
@hamedbahram18 күн бұрын
You mean changing the css variable values in response to an API call?
@dolapoajayi21567 ай бұрын
Nice video man❤..but what if I wanna use a custom orange shade and not Shadcn orange shade?any idea??
@hamedbahram7 ай бұрын
Thank you! you can change the css variable values to whatever color you wish.
@dolapoajayi21567 ай бұрын
@@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🙏🙏
@hamedbahram7 ай бұрын
@@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%; ```