The New Super-Simple Way to Theme Angular Material (v19)

Опубликовано: 20 Декабрь 2024
на канале: Zoaib Khan

3,335

118

#angular #material #theming

In this video, I demonstrate the powerful new mat.theme mixin introduced in Angular Material version 19. Watch as I show the significant reduction in code needed to implement dark mode compared to version 12 and walks you through setting up global styles and component overrides with ease.

Code for the dark mode sample app here:
https://github.com/thisiszoaib/angula...

✨✨ Get the complete code for my Angular Dashboard here: https://zoaibkhan.lemonsqueezy.com/bu...

💡 Live Dashboard Link: https://angular-dashboard-lime.vercel...

💖 Join my Patreon!
  / zoaibkhan

Angular Material Theming Docs: https://material.angular.io/guide/the...

Material System CSS Variables: https://material.angular.io/guide/sys...

📽️ My courses:
https://zoaibkhan.com/courses

✍️My blog for more free Angular posts:
https://zoaibkhan.com/blog

Socials:
Twitter -   / zoaibdev
Facebook -   / thisiszoaib
LinkedIn -   / zoaib-khan-b6456815

Sections:
00:00 Introduction and Overview
00:00 Upgrading Angular Material: Version 12 to 19
00:36 Introducing the Mat Theme Mixin
01:27 Setting Up the Default Theme
05:24 Implementing Dark Mode
07:16 Customizing System Variables
09:31 Showcasing the Angular Material Dashboard
14:00 Overriding Component Styles
19:22 Conclusion and Final Thoughts