Easy, Dynamic Angular Material Theming with just 6 colors!
Вставка
- Опубліковано 9 лип 2024
- #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 - Наука та технологія
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!
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!
@@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.
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.
@@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
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...
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.
very nice Zoaib !!!
Thanks Vivek! ☺️
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.
Hope you find it useful, Micheal!
7
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
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 :)
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?
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
Update: I just tried with latest v18 release and it seems to be working fine. Perhaps clear all node modules and try again?
@@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!).
@@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.
@@hooped8907 thanks for the update!
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?
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.
@@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;
@@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
thx man
You're welcome 🤗
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.
Thanks for the feedback, Steve! I hope you like it 😊
Brother very good حياك الله ❤❤
Thanks 😊
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!
Thanks for the video but it would have been beneficial if you would just share the source code without having to pay it
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
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
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 :)