Easy, Dynamic Angular Material Theming with just 6 colors!

#angular #material #css

✨ Get the theming patch CSS file here (on lemon squeezy now!):

✨✨ Get the whole theme builder app here (on lemon squeezy now!):

🧪 Try out the Theme Builder app LIVE yourself:

Discover an innovative approach to theming Angular Material components using just six CSS variables!

📽️ My courses:

✍️My blog for more free Angular posts:

Socials:

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

[kylerjohnson]

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!

[michaelsmall]

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.

[GregLynn-bn]

This is genius and saved me hours. Thank you!

[JeanDupont-vpht]

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.

[paschalokafor]

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

[gayatriajith]

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.

[ayushtamboli]

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!

[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.

[hooped]

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?

[kieransharpe]

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?

[madeOfClay]

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