Easy, Dynamic Angular Material Theming with just 6 colors!

  Рет қаралды 5,013

Zoaib Khan

Zoaib Khan

Күн бұрын

#angular #material #css
✨ Get the theming patch CSS file here:
buymeacoffee.com/zoaibkhan/e/...
✨✨ Get the whole theme builder app here:
buymeacoffee.com/zoaibkhan/e/...
(Note: If you're a student, send me your ID at consult@zoaibkhan.com and I can send you a discount code!)
🧪 Try out the Theme Builder app LIVE yourself:
material-theme-builder.zoaibk...
Discover an innovative approach to theming Angular Material components using just six CSS variables!
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Sections:
00:00 Introduction to Angular Material 3 Theme Builder
00:29 The Power of Six CSS Variables
00:58 Dynamic Theming and Dark Mode Capabilities
01:18 Inspiration from a Client Project
02:09 Challenges with Official Angular Material Theming API
05:06 Creating a Custom Theming Solution
09:07 Designing Themes in Real Time
17:02 Making the Theme Dynamic and User-Friendly
17:20 How to Implement This Theming in Your Projects
19:26 Conclusion and Call to Action
Cheers,
Zoaib

Пікірлер: 42
@kylerjohnson988
@kylerjohnson988 2 ай бұрын
This is the thing Angular Material has needed for a long time. I, too, wish they'd move away from SCSS. But the implementation of these tokens solves some major frustrations I've had with the theming. Thanks for the great video!
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
I'm loving the tokens too! If we inspect the official material design themes on the docs site as well, basically all they do is set the values of the design tokens. You can actually come up with your own theme or style by just going through that file and substituting whatever you want! I just went a bit further and added some CSS variables that made sense :) Glad the video was helpful!
@kylerjohnson988
@kylerjohnson988 2 ай бұрын
@@ZoaibKhan have you seen the the m3 material theme builder? You can generate some pretty awesome themes there and export the css for it and it contains the material tokens. I haven’t tried to see if pasting those into an Angular Material 3 project works yet.
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Are you referring to this one: material-foundation.github.io/material-theme-builder/ It's nice - but no export option for Angular material specifically. Exporting for the web, seems to generate some color CSS variables only (which I suspect can be used with Web MDC components theming - kind of like the same approach as mine). The other option is to export as JSON, where we get among other things, the color palette which we can copy in as a custom material 3 theme - but it won't be dynamic as with CSS variables.
@kylerjohnson988
@kylerjohnson988 2 ай бұрын
@@ZoaibKhan I’m hoping I can just paste those color variables I get from the web export into a theme class and it will just work. Hoping to get a chance to try it soon
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
I see a new option of system variables when using the m3 theme generator schematic. From the looks of it, I think those maybe the CSS variables exported from the theme generator we're talking about. Tried to make it work, but seems its under progress or something...
@GregLynn-b3n
@GregLynn-b3n 20 күн бұрын
This is genius and saved me hours. Thank you!
@ZoaibKhan
@ZoaibKhan 19 күн бұрын
Thanks Greg! I'm glad you found this useful ☺️
@vivekgupta309
@vivekgupta309 2 ай бұрын
very nice Zoaib !!!
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Thanks Vivek! ☺️
@michaelsmall97
@michaelsmall97 2 ай бұрын
I was just pulling up a link to your last M3 video to send my coworker. We almost went with some ::deep + !important on button toggles to set highlight color, but now we have this approach. Excited to watch the rest of this.
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Hope you find it useful, Micheal!
@arwabouchkoum4795
@arwabouchkoum4795 2 ай бұрын
7
@paschalokafor9043
@paschalokafor9043 Ай бұрын
Thank you very much Zoaib Khan. I have learnt quite alot from you channel. I am new to angular and I wish I could work with you on any project
@ZoaibKhan
@ZoaibKhan Ай бұрын
You are most welcome, Paschal! If you're looking for mentoring, you can email me at consult@zoaibkhan.com - and I'll try to help you out as much as possible :)
@JeanDupont-vp1ht
@JeanDupont-vp1ht 25 күн бұрын
thank you, very interesting. Out of the 3 complaints, I acknowledge the first one: the use of the SASS language, although it is quite straightforward. The other two are not relevant for me: the palettes can be generated by tier tools, and the dynamic requirement is not at all a required feature.
@ZoaibKhan
@ZoaibKhan 25 күн бұрын
Well, it depends! Different apps have different requirements. So while dynamically changing colors at runtime might not be required by one app, another one might need it. Not that we can't do it with material 2 - there are workarounds, but too complicated at least for my liking. But it's a matter of perspective, that was just my view about the problems I came across. Thanks for your input!
@hooped8907
@hooped8907 2 ай бұрын
Thanks for video. I just upgraded to Angular 18 and Material Components V18 but the @angular/material:m3-theme schematic for whatever reason, isn't generating the additional color entries for the neutral palette as seen in your video. Oddly, there is a "_patch-missing-hues" that the built in palettes are generated with for this exact issue. I checked the package.json to be sure I was on 18 and I am. Any idea's what might be going on?
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
That's odd. I generated the m3 theme file in the video with the v18 RC version, so let me check it again with the v18 release and get back
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Update: I just tried with latest v18 release and it seems to be working fine. Perhaps clear all node modules and try again?
@hooped8907
@hooped8907 2 ай бұрын
@@ZoaibKhan Hey thanks for testing that out. I'll try a fresh project rather than the existing app I just upgraded from 17 and see what happens and report back when I get a moment. Again, thanks for your video (and all the other ones!).
@hooped8907
@hooped8907 2 ай бұрын
@@ZoaibKhan I was providing the primary, secondary, tertiary and neutral colors. I narrowed it down to if you provide a neutral color, then the schematic doesn't generate those extra 10 colors for the neutral palette. I'm not sure if that's a bug or what but it's good enough for now.
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
@@hooped8907 thanks for the update!
@kieransharpe4532
@kieransharpe4532 2 ай бұрын
Would it be possible to extend the variables to also include the accent colour that is present on the angular material website? Where the color="accent" property is set?
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Yes, it is possible to do so by setting the primary or other color values under the relevant selector. So when color="accent" property is set, angular material adds the '.mat-accent' class to the button. So you can modify the theming file to target body plus the .mat-accent selector: --accent: red; body .mat-accent { --primary: var(--accent); } And then add another --accent variable as above. Note, you don't need to specify each token and assign it to accent, you can simply change any of the six variables to whatever you need for the accent style. You can also create your own component in angular e.g. like an accent-button, which specificially sets the primary color to your accent color. This is the flexibility that CSS variables provide! Let me know if you need more help - I'll be glad to explain in a video perhaps.
@kieransharpe4532
@kieransharpe4532 2 ай бұрын
@@ZoaibKhan Thanks for the quick reply! I'm not sure if this is working as expected. I've set this up and it doesn't seem to be taking the changed value of the --primary variable. Using the Button page on the material documentation as an example. Basic, Primary, Warn and Link are the correct color but the Accent button remains whatever the default material style sheet is set to. Below is the info from the dev tools for that accent button in the example .mat-accent.mat-mdc-button-base { --mdc-text-button-label-text-color: #343dff; --mdc-protected-button-label-text-color: #343dff; --mdc-filled-button-container-color: #343dff; --mdc-filled-button-label-text-color: #ffffff; --mdc-outlined-button-label-text-color: #343dff; --mat-text-button-state-layer-color: #343dff; --mat-text-button-ripple-color: rgba(52, 61, 255, 0.12); --mat-protected-button-state-layer-color: #343dff; --mat-protected-button-ripple-color: rgba(52, 61, 255, 0.12); --mat-filled-button-state-layer-color: #ffffff; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.12); --mat-outlined-button-state-layer-color: #343dff; --mat-outlined-button-ripple-color: rgba(52, 61, 255, 0.12); } body .mat-accent { --primary: var(--accent); } --accent: #F7C245;
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
​@@kieransharpe4532 It'll be a difficult to discuss here. If possible, please send me a stackblitz or GitHub repo link on consult@zoaibkhan.com - so I can see what the problem might be
@mahdiandalib186
@mahdiandalib186 2 ай бұрын
thx man
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
You're welcome 🤗
@stevewitman
@stevewitman 2 ай бұрын
Zoaib thank you for this! I will definitely give your theme-builder as soon as I get a chance. It seems like a reasonable price for a tool to quickly experiment and I like the idea of getting to pick the exact colors that I want.
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Thanks for the feedback, Steve! I hope you like it 😊
@mesutbarut2484
@mesutbarut2484 2 ай бұрын
Brother very good ‏حياك الله ❤❤
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Thanks 😊
@madeOfClay99
@madeOfClay99 2 ай бұрын
Thanks for the video but it would have been beneficial if you would just share the source code without having to pay it
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
Thanks for your concern and I can understand. I do explain the exact process I followed, so if you'd like you can follow the same and come up with your own version of it. I spent time and energy on it, so... :) If you're a student and need the code, you can also drop me an email at consult@zoaibkhan.com and I can provide you a discount. P.S. Your support helps me sustain the channel and keep making useful content. Thanks again for your interest, Cheers
@madeOfClay99
@madeOfClay99 2 ай бұрын
I appreciate your reply, although I don't agree with you. Sharing is caring, you are putting a simple demo behind a paywall, a demo....is not even an application for production use. It's like you created a delicious meal and you are putting a price for the recipe instead of sharing it with the community so others can learn and modify it and everyone wins, or setting a price for a response on Stackoverflow for someone in need. In any case, that's how you role, fine. You have lost a subscriber, there are other youtubers, certificate Angular developers experts that share in their videos their demos, not asking for a price. Good luck with your channel
@ZoaibKhan
@ZoaibKhan 2 ай бұрын
That's fine, sometimes we agree to disagree. It's a nice analogy though about the recipe. The thing is I've already given away the recipe in this and the previous video for FREE - so you can come up with your dish yourself if you want :) And if you want to taste the dish (as you said), I added a link to a LIVE deployment of the Theme Builder App after the video was published (in the description and an in video card). But yeah I did it after publishing, so it might have escaped your notice. It's given below again: easy-material-theming.vercel.app/ So hope that helps. And I wish you all the best in your learning journey! And I also respect all the other youtubers and content creators who give their time and energy to teaching others. Thanks for expressing your opinion here :)
@ayushtamboli3496
@ayushtamboli3496 25 күн бұрын
Hi Zoaib, I am a first-year BCA student. It's difficult for us to make purchases, so if you can't provide the source codes for free, that's okay. But at least, like in your other tutorials, please provide the codes under the video tutorials so we can learn from them. I am learning a lot from your tutorials and hope you understand. Thank you!
@ZoaibKhan
@ZoaibKhan 25 күн бұрын
Hey Ayush! Since you're a student, just send me a message using the contact feature at the bottom of my shop page here buymeacoffee.com/zoaibkhan/extras And I'll send you a discount code for any of the items that you need :) Hope that helps in your learning journey
@frochaol
@frochaol Күн бұрын
fu
@ZoaibKhan
@ZoaibKhan Күн бұрын
?
How to make your Angular apps responsive with CDK Layout and CSS?
16:45
Learn Web Design For Beginners - Full Course (2024)
3:07:31
Flux Academy
Рет қаралды 1,6 МЛН
Jumping off balcony pulls her tooth! 🫣🦷
01:00
Justin Flom
Рет қаралды 27 МЛН
Playing hide and seek with my dog 🐶
00:25
Zach King
Рет қаралды 36 МЛН
小宇宙竟然尿裤子!#小丑#家庭#搞笑
00:26
家庭搞笑日记
Рет қаралды 12 МЛН
A little girl was shy at her first ballet lesson #shorts
00:35
Fabiosa Animated
Рет қаралды 16 МЛН
Angular Material Theme with CSS Variables (Custom Properties)
16:55
Customizing Angular Material just got easier in v18!
14:12
Zoaib Khan
Рет қаралды 9 М.
Reactive Form Validation in Angular: Mastering Best Practices
13:08
Monsterlessons Academy
Рет қаралды 4,3 М.
Angular and Angular Three with Chau
1:30:40
Tech Talks With Santosh
Рет қаралды 1 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 164 М.
Are you using Angular Signal Effects in the RIGHT way?
11:13
Dark theme switching with Angular Material (2020)
14:25
Decoded Frontend
Рет қаралды 32 М.
Better Than Smart Phones☠️🤯 | #trollface
0:11
Not Sanu Moments
Рет қаралды 17 МЛН
تجربة أغرب توصيلة شحن ضد القطع تماما
0:56
صدام العزي
Рет қаралды 63 МЛН
ноутбуки от 7.900 в тг laptopshoptop
0:14
Ноутбуковая лавка
Рет қаралды 3,5 МЛН