Тёмный

How to Setup Shadcn UI + Themes in NextJs 14 

Hamed Bahram
Подписаться 165 тыс.
Просмотров 32 тыс.
50% 1

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 64   
@alexdin1565
@alexdin1565 7 месяцев назад
woow amazing you are the first one on youtube who cover theming topic thakns
@hamedbahram
@hamedbahram 7 месяцев назад
My pleasure! Glad to hear that.
@uixmat
@uixmat 7 месяцев назад
Been using Radix Primitives and more recently shadcn ui for a while now. frickin love em!
@hamedbahram
@hamedbahram 7 месяцев назад
Absolutely 💯
@harirasamir2436
@harirasamir2436 4 месяца назад
Waw bravo high-quality content and excellent courses. Thanks Hamed well done
@hamedbahram
@hamedbahram 4 месяца назад
Thank you! welcome to the channel 🙌🏼
@Elliot-Dx
@Elliot-Dx 7 месяцев назад
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 ?
@hamedbahram
@hamedbahram 7 месяцев назад
I'll have that in mind for future videos.
@muhammadsetyanto3515
@muhammadsetyanto3515 Месяц назад
Fantastic! Thanks sir.
@hamedbahram
@hamedbahram Месяц назад
You're welcome!
@teacookie-wynn
@teacookie-wynn 2 месяца назад
Finally someone talking about custom themes...
@hamedbahram
@hamedbahram 2 месяца назад
There you have it :)
@idontknowmyname2387
@idontknowmyname2387 2 месяца назад
absolutely amazing!
@hamedbahram
@hamedbahram 2 месяца назад
Thank you!
@sayedalisinasadat2908
@sayedalisinasadat2908 5 месяцев назад
it was useful for me and if you have time please make video Radix UI 😍.
@hamedbahram
@hamedbahram 5 месяцев назад
For sure! Thanks for the suggestions.
@fakhrulislamfuad8072
@fakhrulislamfuad8072 7 месяцев назад
nice video bro.. keep this good work up😃😃
@hamedbahram
@hamedbahram 7 месяцев назад
Thanks! I appreciate that.
@emmanuelmantilla1465
@emmanuelmantilla1465 5 месяцев назад
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.
@hamedbahram
@hamedbahram 5 месяцев назад
Wouldn't it be easier with css variables?
@sivadhanushuppalapati4041
@sivadhanushuppalapati4041 7 месяцев назад
Hi sir, Installing this UI library increases the project/ application size? If so is this to be concerned sir?
@hamedbahram
@hamedbahram 7 месяцев назад
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.
@pravinshinde4979
@pravinshinde4979 19 дней назад
Awesome! thank you very much, it was really helpful
@hamedbahram
@hamedbahram 19 дней назад
Glad to hear that!
@raymondmichael4987
@raymondmichael4987 7 месяцев назад
How to enable both light and dark mode on a particular color, like orange in dark and light mode. ❤😊😊
@hamedbahram
@hamedbahram 7 месяцев назад
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?
@d4rzk252
@d4rzk252 7 месяцев назад
@@hamedbahramSo I will just do .orange.dark {...}, .orange.light {...} in css?
@raymondmichael4987
@raymondmichael4987 7 месяцев назад
@@hamedbahram For light .orange{} For dark .dark .orange {} Right?
@hamedbahram
@hamedbahram 7 месяцев назад
@@raymondmichael4987 Exactly!
@hamedbahram
@hamedbahram 7 месяцев назад
@@d4rzk252 Exactly!
@fabouwes9240
@fabouwes9240 6 месяцев назад
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?
@hamedbahram
@hamedbahram 6 месяцев назад
You have to separate the theming from the light/dark mode.
@PootCoinSol
@PootCoinSol 2 месяца назад
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
@hamedbahram
@hamedbahram 2 месяца назад
Good point!
@MeenaVlogs1313
@MeenaVlogs1313 5 месяцев назад
How can change js html css into next.js ?
@hamedbahram
@hamedbahram 5 месяцев назад
Do you know React?
@MeenaVlogs1313
@MeenaVlogs1313 5 месяцев назад
@@hamedbahram yes
@MichaelHofweller
@MichaelHofweller 2 месяца назад
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?
@hamedbahram
@hamedbahram 2 месяца назад
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
@MichaelHofweller
@MichaelHofweller 2 месяца назад
@@hamedbahram Cool I'll check it out. Thank you! Great videos.
@MichaelHofweller
@MichaelHofweller 2 месяца назад
@@hamedbahram The solution as far as I can tell was the use of supressHydrationWarning in the
@zvinzv
@zvinzv 7 месяцев назад
i love it ❤‍🔥, can i know what is the font name used in vscode?
@hamedbahram
@hamedbahram 7 месяцев назад
My pleasure! My font is Operator mono
@PooyaDehghani-s1m
@PooyaDehghani-s1m 7 месяцев назад
Well done Hamed Jan, thanks.
@hamedbahram
@hamedbahram 7 месяцев назад
Thanks! Appreciate that.
@BooleanOperator
@BooleanOperator 6 месяцев назад
Another great tutorial, Thanks Hamed.
@hamedbahram
@hamedbahram 6 месяцев назад
Thanks! I appreciate that.
@neoTriny
@neoTriny 3 месяца назад
Awesome ! Just discovered this channel. Thanks for the nice explanations @hamed. Go ahead Next js 💥
@hamedbahram
@hamedbahram 3 месяца назад
Thanks! Welcome to the channel.
@sattayaprata
@sattayaprata 18 дней назад
how to setting Themes config in NextJs 14 by get value from api
@hamedbahram
@hamedbahram 18 дней назад
You mean changing the css variable values in response to an API call?
@dolapoajayi2156
@dolapoajayi2156 7 месяцев назад
Nice video man❤..but what if I wanna use a custom orange shade and not Shadcn orange shade?any idea??
@hamedbahram
@hamedbahram 7 месяцев назад
Thank you! you can change the css variable values to whatever color you wish.
@dolapoajayi2156
@dolapoajayi2156 7 месяцев назад
@@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🙏🙏
@hamedbahram
@hamedbahram 7 месяцев назад
@@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%; ```
@Anshumantiwarianstiwar
@Anshumantiwarianstiwar 7 месяцев назад
amazing high-quality content, thanks !!!!
@hamedbahram
@hamedbahram 7 месяцев назад
My pleasure! I appreciate that.
Далее
Why I Pick ShadCN and Tailwind for all my projects
18:53
ShadCN’s Revolutionary New CLI
12:11
Просмотров 48 тыс.
Global State Management in NextJs 14 Using Zustand
51:17
How the PROS Use Tailwind
9:55
Просмотров 50 тыс.
React Charts in Shadcn/ui
20:03
Просмотров 3 тыс.
You’re doing dark mode wrong!
7:54
Просмотров 51 тыс.
This UI component library is mind-blowing
8:23
Просмотров 677 тыс.
Shadcn + Next.js 13 is HEAVEN | A QUICK GUIDE
13:30
Просмотров 136 тыс.
Become A Software Engineer For Free (Class 01) - 100Devs
3:23:06