Hello, I have a question How can I use the different shades of the color palette provided by angular? Like azure, cherry etc. Before you had a function for it, but i cannot get it to work Like for example I want to use the 500 shade of the mat.azure color in my scss how can I do that? Thank you
Not really sure, because there is no mention of this in the guides. I'm sure there must be an easy way to do it in Sass - but not that great of a Sass guy myself :)
Thanks for the video! I have one question: How do you create a theming config variable to pass to components? In that case, should we use mat.define-theme?
hy, can you use mixins to change color pallet in realtime? or i have to rebuild every theme and apply a reset to change the colors to do so? can you explain if this cand be done? sorry about my english
Both mixins and color palettes are used at compile time only, so that would be a no for realtime. But the mixin emits the CSS color system variables - so you can change those at runtime pretty easily.
@@ZoaibKhan First of all, thx for the video! I have the same issue. How is it possible to set these variable at runtime? Can you give a short explanation?
@@dieIcelimo Great! Yup, they are just simple CSS variables - so can be overriden at any level in the app :) I also have a short summary of a longer video I did on all the system variables in material and how I created a dark theme switcher using them. You might find it useful ua-cam.com/video/5toEyMTcTr8/v-deo.html
Thanks for the explanation. I don't understand, why we don't at least get the primary / secondary / ... colors as css classes out of the box, but i guess that's the material way. Here's hoping they are done with breaking changes and reinventing the wheel every 1-2 years with Version 3...
Really very helpful to me . can you please make a short video for typography also dynamic fonts size changes setting for dashboard or across application so admin can change font type and size Thanks
Could you please start the angular tutorials series from basics to advance or make any type of dashboard application UI only that we can follow and understand how things works
@@ZoaibKhan Could you please make a playlist of videos in your channel as i cant find as structure wise could you please make it in one playlist tab It could be named as Angular Dashboard from start to end for begginer as i dont know which video should i start with first and so on till the end
Here's the playlist for the dashboard - it includes all of the videos related to it in sequence. This playlist is also shown on my main channel page. ua-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html
Great explanation of this! Thank you
Hey Joe! Glad you liked it :)
You have helped me a lot. Thank you very much!
You're welcome and glad to have helped :)
glad you touched on this! lol thanks brother! I am going to have to change tailwind and things like that to now include --mat- var
Oh, let me know how it goes!
Great Job 👏🏻 Really very helpful and informative 〽️
Glad you liked it! 👍
Hello, I have a question
How can I use the different shades of the color palette provided by angular?
Like azure, cherry etc.
Before you had a function for it, but i cannot get it to work
Like for example I want to use the 500 shade of the mat.azure color in my scss how can I do that?
Thank you
Not really sure, because there is no mention of this in the guides. I'm sure there must be an easy way to do it in Sass - but not that great of a Sass guy myself :)
@ZoaibKhan hi, yes - its been a bit frustrating since the official docs don't explain this at all
Thanks for the video! I have one question: How do you create a theming config variable to pass to components? In that case, should we use mat.define-theme?
hy, can you use mixins to change color pallet in realtime? or i have to rebuild every theme and apply a reset to change the colors to do so? can you explain if this cand be done? sorry about my english
Both mixins and color palettes are used at compile time only, so that would be a no for realtime. But the mixin emits the CSS color system variables - so you can change those at runtime pretty easily.
@@ZoaibKhan First of all, thx for the video! I have the same issue. How is it possible to set these variable at runtime? Can you give a short explanation?
Got it myself. Its actually quiet simple, as you said: document.documentElement.style.setProperty('--mat-sys-primary', '#00ff00');
@@dieIcelimo Great! Yup, they are just simple CSS variables - so can be overriden at any level in the app :)
I also have a short summary of a longer video I did on all the system variables in material and how I created a dark theme switcher using them. You might find it useful
ua-cam.com/video/5toEyMTcTr8/v-deo.html
Beautiful! Thanks a lot!
Glad you like it! :)
Could you please share the code for switching???
Yup, here you go:
github.com/thisiszoaib/angular-dark-mode
Thanks for the explanation. I don't understand, why we don't at least get the primary / secondary / ... colors as css classes out of the box, but i guess that's the material way. Here's hoping they are done with breaking changes and reinventing the wheel every 1-2 years with Version 3...
yeah, the no color variants thingy is flowing from material design 3 specs. Me hoping for the same 😄
Should we start learning with angular 12/13/14
or
we should start learning angular 18and 19
Angular 18 would be a good version to start with. Unless you have a legacy application in earlier versions
Really very helpful to me . can you please make a short video for typography also dynamic fonts size changes setting for dashboard or across application so admin can change font type and size Thanks
Hmm, that's an interesting idea. Let me take a look and see if I can come up with something
great thanks for the video, can u make a video on adding custom colours Palettes instead of Prebuilt Color Palettes ?
Ok noted!
Please add an example with material theme and tailwind
There is already a video on it. Check in my videos
Could you please start the angular tutorials series from basics to advance or make any type of dashboard application UI only that we can follow and understand how things works
Check out my customizable dashboard series where we build a dashboard from scratch
@@ZoaibKhan Could you please make a playlist of videos in your channel as i cant find as structure wise
could you please make it in one playlist tab It could be named as Angular Dashboard from start to end for begginer
as i dont know which video should i start with first and so on till the end
Here's the playlist for the dashboard - it includes all of the videos related to it in sequence. This playlist is also shown on my main channel page.
ua-cam.com/play/PLHbz-DWIAPJAUZSossNgj6-ds1MwSL2f_.html
Please add custom theme demo example
Yes, I will in future videos, hopefully soon!