Theming Angular 19-21 and Material MD3 - The missing guide

Name: Theming Angular 19-21 and Material MD3 - The missing guide
Rating: 4.8 (152 reviews)

Learn how Angular Material 19-21 (MD3) does Theming and Customization using Modern CSS Techniques and SCSS

Created byKobi Hari

Last updated 3/2026

English

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.

Course content

10 sections • 117 lectures • 12h 10m total length

Introduction5:03
What you need to know1:45
Practicing what you learn2:26

Introduction to modern CSS1:45
Custom Properties in CSS8:31
Applying custom property using the `var` function6:43
Using `var` in composite properties5:03
Try it yourself: The 'var' function4:15
Color System: Palettes and Themes7:37
Introduction to Color Spaces: RGB6:02
Understand color spaces as recipe-like systems for mixing and displaying colors consistently across devices. Explore RGB's red, green, and blue primaries and how additive light contrasts with subtractive paint blending.
Demonstrating RGB palettes8:03
Try it yourself: RGB Palettes0:21
A color space for humans: HSL9:36
Discover how the hsl color space uses hue, saturation, and lightness to build intuitive palettes, using a color wheel, Visual Studio Code color picker, and practical examples.
Try if yourself - HSL Palettes1:00
A color space for themes: OKLCH13:49
Try it yourself: OKLCH6:03
More Color spaces7:46
New color and alpha syntax3:47

Introduction to dynamic themes1:45
The `color-mix` function9:01
Mixing in different color spaces8:58
Dynamic palette using color-mix6:59
Try it yourself: color-mix1:24
Relative colors using the 'from' keyword10:16
Learn to generate harmonious palettes with relative colors using the from keyword, anchoring on a base color and adjusting hue, saturation, lightness across hsl, rgb, and hex.
Using the calc function with relative colors6:22
Using min, max, and clamp with relative colors4:29
Building palettes and applying a theme7:27
Try it yourself - Palettes using Relative Colors2:59
Light and Dark: The `color-sheme` property5:27
Conditional Colors: The `prefers-color-sheme` media query5:31
Conditional Colors: The `light-dark` function7:26
Try it yourself: Dark and Light Color Schemes1:48

Introduction to Scss1:36
Explore scss features that matter for theming, including variables, mixins, and nesting, and see how they relate to modern css capabilities and Angular Material theming.
What are style preprocessors?5:10
Code along: Our Scss Playground5:51
Nesting in Scss7:20
The '&' (parent) selector3:27
Explore the ampersand (parent) selector in Sass to attach selectors without spaces, avoid the default descendant combinator, and craft context-aware hover rules with right to left and debugging notes.
Using Scss variables6:42
Debugging in ScSS4:50
Expression interpolation7:41
Functions in Scss7:53
Explore how scss functions work, including built-in and custom functions, the compile-time evaluation versus runtime behavior, and using at function and at return to define reusable logic.
Using built in modules5:19
Lists in Scss11:10
Maps in Scss7:17
Mixins in Scss6:36
Master scss mixins to generate css blocks and reuse styles across the project. Define mixins with parameters and use include to theme buttons with color variations.
Flow control in Scss using @if and @for6:28
Modules and Partials9:10
Summary1:15
Establish a SAS foundation by exploring variables, functions, nesting modules, and mixins, building familiarity for theming and creating flexible, maintainable styles.

Introcution to Theming in Angular1:43
Getting familiar with our demo project7:43
Explore dynamic theming in an Angular 19 and Material MD3 project. Automate css custom properties with sass, implement a runtime theme switcher, and build reusable, theme-aware blog components.
Refactoring palette entries to use relative colors10:33
Setting up Scss configuration5:22
Moving global styles to mixins5:12
Move global styles into sass mixins and partials to create reusable back button and syntax highlight styles; shrink the main style file and prepare a color system for future automation.
Implementing the color system and theme mixins11:03
Develop a dynamic color system with three palettes—neutral, primary, and accent—where the theme provides hue and the system fixes saturation and brightness, enabling light and dark themes via sass mixins.
Automating the color system mixin -Part 111:37
Automating the color system mixin - Part 213:44
Automate the color system with a reusable sass mixin that generates palette entries for gray, primary, and accent levels in light and dark schemes. Apply themes via body class.
Creating Theme service13:00
Applying the Theme State on the DOM6:25
Connecting theme selection UI to the service9:20
Inject the theme service into the app component and bind a dynamic color selector and three scheme buttons to read and update the current theme.
Understanding Design tokens8:17
Learn how design tokens define visuals as named values and use a token hierarchy—reference, system, and component tokens—to create themeable, reusable components like the fav button with css custom properties.
Styling widgets based on Design Tokens14:05
The catch!2:08

Introduction to Angular Material Theming2:31
The story of Material Design2:52
What does MD2 and MD3 mean?9:36
Explore the evolution of material design from md1 to md3, including material you, design tokens, and responsive theming. See how angular material 19 adopts md3 with token-based theming across components.
Getting started with Angular Material9:18
Improving IntelliSense for Angular Material Imports8:24
Using the mat.theme mixin6:47
Configure the theme with the mat.theme mixin by supplying a color map and a primary palette. Add secondary and tertiary palettes, set Roboto, and adjust density for md3 theming.
Comparing MD3 themes with previous versions6:36
Compare MD3 themes with earlier versions, showing how web design tokens and system design tokens replace the need for multiple mixins. See how components derive styling at runtime from tokens.
Using system design tokens7:13
Learn to style custom components with Angular Material system design tokens via CSS variables and the var() function, covering colors, typography, and elevation for light and dark themes.
Try it: Setting up themes and using web tokens7:17
The theme palettes5:17
The color system variables3:38
The theme-type property5:04
Learn how angular material 19 supports both light and dark modes in a single theme using color scheme tokens, the light dark function, and optional theme type for legacy browsers.
Global and scoped themes5:58
Try it: Scoped Themes3:59
Define two scoped themes in styles, theme red and theme green, then apply them to card groups to colorize content using design tokens and mat button.
Using the theme shadows and elevation3:30
Understanding theme density10:33
Try it: Theme density and shadows1:24
Practice shadows and density, add shadow to the card, declare a custom system density token, apply it to components, and vary density to observe layout changes.

Introduction to Customization in Angular Material1:55
Why we need schematics to generate themes?5:37
Learn why Angular Material uses the HCT color system and schematics to generate themes, enabling custom palettes and full control over primary, secondary, and neutral palettes.
The custom theme scematics9:04
Custom themes with SCSS files11:06
Adding custom system tokens using wrapper mixin10:09
Theme Overrides9:44
Learn to customize Angular Material components in MD3 by using design tokens and theme overrides, including partial theming, token-specific changes, and practical examples with toolbar, cards, buttons, and badges.
Try it - Theme Overrides1:03
Explore theme overrides in material md3 by practicing token changes with the mat theme overrides mixin or a full theme replacement, using dev tools and Stackblitz.
Overriding Material component tokens6:57
Learn how Angular Material uses design tokens: system tokens and component tokens, and override the mat icon color with component tokens and the mat icon overrides mixin to customize icons.
Customizing the Card component11:51
Try it - Customize the toolbar6:49
Customize the angular material toolbar by applying a light primary background and a medium primary foreground, styling icons with tokens and system variables, and exploring inherited typography.
How to display button in accent or warn colors?13:20
Explore how to theme Angular Material buttons across a site using color palettes, tokens, and global theming, and learn to customize accent, primary, warn, error, and success states.
Try it: Accent and Warn buttons1:17
Practice selectors for color equals accent and color equals one, switch to tertiary or red palette, and apply it to app component buttons to validate md two md three theming.

Introduction to Typography and Icons2:04
Typography styles in Material MD32:39
Using Typography system variables7:06
Customizing the theme typography6:02
Try it: Typography1:20
Practice typography theming in Angular Material by applying system design tokens, fixing the global paragraph rule, configuring h1, and using a two-font map with weights for text, buttons, and labels.
Self Hosting fonts in our public folder15:41
Self hosting fonts using npm9:35
Understanding the icons system in Material6:27
Understanding mat-icon Font Sets7:35
Try it - Icons and Font Sets1:18
Practice adjusting header icons in Material Design by canceling default sizes to avoid clipping and applying outline, default, and round font sets in the Material Icons package.
The new "Material Symbols"!7:45
Customizing symbol variations7:09
Try it - Material Symbols5:34
Replace all icons in an angular material md3 app with material symbols, apply a global symbol style, and implement a hover-to-fill interaction using font variation settings.
Custom SVG Icons13:47
Try it - Custom SVG Icons4:09
Learn to make svg icons themeable by using design token-based fills, register a second icon, and replace the heart in the toolbar with sass-styled, scalable svg icons.
Other Icon Registry features5:21
Learn to use the icon registry to alias font sets, create a symbol shortcut, and set a font class for material symbols, with options to add fonts like Font Awesome.

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.

Theming Angular 19-21 and Material MD3 - The missing guide

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 9min

Modern CSS Features for Theming15 lectures • 1hr 30min

Dynamic Themes using CSS14 lectures • 1hr 20min

Code Along - theming an Application using CSS6 lectures • 31min

Scss essentials for Theming16 lectures • 1hr 38min

Code Along - Theming Angular applications14 lectures • 2hr

Introduction to Angular Material Theming17 lectures • 1hr 40min

Advanced Customizations in Angular Material12 lectures • 1hr 29min

Typography and Iconograpy in Anuglar Material MD316 lectures • 1hr 44min

Summary4 lectures • 10min

Requirements

Description

Who this course is for: