Angular Material 18 Dark Theming with System Color Variables!

Опубликовано: 10 Ноябрь 2024
на канале: Zoaib Khan

2,270

#angular #dashboard #material

✨✨ Get the dashboard: https://zoaibkhan.lemonsqueezy.com/bu...

🎉 New shop link: https://zoaibkhan.lemonsqueezy.com/

🔗 Official Material Foundation Theme Builder
https://material-foundation.github.io...

In this video, we'll add a dark mode to our Angular Material Dashboard using Material Design System Color Variables!

✨ Theme Builder App with 6 colors: https://zoaibkhan.lemonsqueezy.com/bu...

📽️ Video tutorial on design tokens in Angular Material v18
   • Easy, Dynamic Angular Material Themin...

📽️ 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:02 Setting Up Dark Mode in Angular Material
01:08 Using CSS Variables for Dynamic Theming
02:14 Enabling CSS Variables in Angular Material
05:48 Generating Color System Variables
08:13 Implementing Color System Variables in Angular
12:06 Switching Between Light and Dark Modes
13:58 Migrating to Lemon Squeezy
15:49 Customizing Widgets with CSS Variables
23:25 Conclusion and Future Updates