Theming Angular 19-20 and Material MD3 - The missing guide
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English (US) | Size: 6.33 GB | Duration: 12h 9m
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English (US) | Size: 6.33 GB | Duration: 12h 9m
Learn how Angular Material 19-20 (MD3) does Theming and Customization using Modern CSS Techniques and SCSS
What you'll learn
Learn how Angular Material Theming system works under the hood - by using the same pattern on your own components
Build a reusable theming system for any Angular app—not just those using Material.
Create multiple themes and switch them at runtime with full light/dark mode support.
Use multiple themes simultaneously within the same app to highlight different semantic contexts or user modes
Customize Angular Material components by overriding tokens and introducing your own design tokens.
Style typography and icons, self-host fonts, and integrate custom SVGs with full theming support.
Build dynamic themes using custom properties, color-scheme, color-mix(), relative colors, and light-dark() CSS functions.
Set up a flexible color system using OKLCH and understand how color roles map to design palettes.
Use SCSS to generate palettes, manage styles, and organize theming logic with maps and mixins.
Requirements
Prior basic experience with angular
Some experience in modern angular with signals
Familiarity with CSS fundamentals like selectors and colors and fonts
NO prior knowledge of Angular Material is required
Description
What if you could control the look of your entire app with a single color? What if your design could adapt to light and dark modes—automatically? What if Angular Material actually felt… flexible?Theming Angular and Material MD3 – The Missing Guide is a Udemy course by Angular instructor Kobi, designed to teach you how to Angular Material build scalable theming systems using modern CSS, SCSS. And how you can also do it in your own libraries.This Angular theming course shows how modern CSS and the latest Angular Material unlock powerful, flexible theming capabilities. Learn to build a scalable, reusable theming system for your Angular apps that adapts to light and dark modes, and supports multiple palettes. Take full control of your application’s look and feel by customizing every aspect of Angular Material with clarity and ease.What You’ll Learn:Build dynamic themes using custom properties, color-scheme, color-mix(), relative colors, and light-dark() CSS functions.Set up a flexible color system using OKLCH and understand how color roles map to design palettes.Create multiple themes and switch them at runtime with full light/dark mode support.Use SCSS to generate palettes, manage styles, and organize theming logic with maps and mixins.Customize Angular Material components by overriding tokens and introducing your own design tokens.Style typography and icons, self-host fonts, and integrate custom SVGs with full theming support.Build a reusable theming system for any Angular app—not just those using Material.Why This Course?Covers the full theming stack—from modern CSS to SCSS and Angular Material.Real-world structure and best practices that you can apply immediately in your projects.Practical demos and reusable code that save you time and help you build faster.Taught by an experienced Angular instructor focused on clarity, usefulness, and developer experience.Theming Angular and Material MD3 – The Missing Guide is your complete path to mastering dynamic theming and building professional, themeable Angular applications with modern CSS, SCSS, and Angular Material.
Who this course is for:
Angular developers who want to create professional, polished apps with consistent themes., Developers with prior knowledge of previous versions of Angular Material - Feeling lost with recent changes, Angular developers looking to unlock the full power of Angular Material’s new theming system., Designers working closely with developers and want better control over color, typography, and layout implementation.