Learn Angular 19 Theming and Customization with Material Design 3, SCSS, and Modern CSS Techniques

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 multiple themes simultaneously within the same app to highlight different semantic contexts or user modes
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.

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?Discover 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.

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.
Homepage:

https://www.udemy.com/course/theming-angular-and-material-md3-the-missing-guide/