Easy, Dynamic Angular Material Theming with just 6 colors!

[@kylerjohnson988]

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]

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]

@@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]

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]

@@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]

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]

This is genius and saved me hours. Thank you!

[@ZoaibKhan]

Thanks Greg! I'm glad you found this useful ☺️

[@michaelsmall97]

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]

Hope you find it useful, Micheal!

[@arwabouchkoum4795]

7

[@christoeloff4591]

Thank you so much for this, you just made my life so much easier

[@ZoaibKhan]

Glad you liked it ☺️

[@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]

You are most welcome, Paschal! If you're looking for mentoring, you can email me at [e-mail] - and I'll try to help you out as much as possible :)

[@JeanDupont-vp1ht]

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]

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!

[@ahmadsaabirkhan7302]

Hi. Which AI are you using in vs code?

[@ZoaibKhan]

I've been using Supermaven quite a lot. But switched to cursor now :)

[@giacomo.tabarelli]

what about secondary and tertiary?

[@ZoaibKhan]

We can add any number of colors ourselves if we want. Angular Material new versions only have backwards compatibility for properties like color=accent, so moving forward we need to use design tokens for components and override them using our colors wherever we need them. So e.g. we can create an accent button component in which the mat button colors are assigned to our own accent/secondary/tertiary color and then use that component wherever we want an accent button... That's the general idea.

[@vivekgupta309]

very nice Zoaib !!!

[@ZoaibKhan]

Thanks Vivek! ☺️

[@kieransharpe4532]

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]

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]

@@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]

​@@kieransharpe4532 It'll be a difficult to discuss here. If possible, please send me a stackblitz or GitHub repo link on [e-mail] - so I can see what the problem might be

[@gayatriajith6448]

Hi Sir, can you please create a tutorial of angular material theming and typography where we can customize the size of the form fields globally in the application? angular material form fields are usually of big height and size.

[@ZoaibKhan]

Hey! That is a good idea, I'll add it to my list for future videos, thanks 🙏

[@hooped8907]

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]

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]

Update: I just tried with latest v18 release and it seems to be working fine. Perhaps clear all node modules and try again?

[@hooped8907]

@@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]

@@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]

@@hooped8907 thanks for the update!

[@stevewitman]

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]

Thanks for the feedback, Steve! I hope you like it 😊

[@mesutbarut2484]

Brother very good ‏حياك الله ❤❤

[@ZoaibKhan]

Thanks 😊

[@ayushtamboli3496]

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]

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

[@mahdiandalib186]

thx man

[@ZoaibKhan]

You're welcome 🤗

[@madeOfClay99]

Thanks for the video but it would have been beneficial if you would just share the source code without having to pay it

[@ZoaibKhan]

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 [e-mail] 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]

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]

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 :)

[@kaabizahra8386]

Can i please get the holy Quran API ?

[@ZoaibKhan]

Sure, it uses quran.com API. Check in their Developer docs section

[@frochaol]

fu

[@ZoaibKhan]

?