Angular Material 3 Theming System: Complete Guide

Announcing new course: Angular Material 3 Theming System: Complete Guide

You can read the full details on the course launch page!

In this course, we will learn about modifying themes and typography and much more using new SASS mixins in Angular Material Components for Material 3.

What's included?

When you buy the course, you gain access to everything included in the course. This includes all premium articles, and any future additions we make to the course.

There are no recurring subscriptions, and you won't be charged for updates. You make a one-time payment and enjoy perpetual access to all our premium course content.

Version Compatibility

The content, code and steps explained this course, works with Angular 18, Angular Material/CDK 18 and Material 3 design.

What is covered?

Basic: Simple, textual course

Below is the summary of what we will be covering in this course:

1. Getting Started
   1. Overview - Summary of version compatibility, chapters, article titles and what is covered
   2. Angular Material Components - What is it and what are latest changes to adhere to the new Material 3 design system
   3. Theming Dimensions
2. Development Environment
   1. Setting up the project
3. Dimension: Color
   1. Using a pre-built theme
   2. Create a custom theme - Understand some important mixins and apply custom theme to Angular Material components
   3. Create a dark theme - We will also implement lazy loading for dark theme, so that it only loads when needed
   4. Theme construction - Understanding how themes are constructed in Angular Material 18
   5. Theme from custom colors
4. Dimension: Typography
   1. Configuring Typography
5. Dimension: Density
   1. Customizing density
6. CSS custom properties - Learn how to modify theme for Angular Material 18 with CSS variables
   1. Overview
   2. Enable system variables
   3. Modify colors
   4. Modify typography
7. Components Themes
   1. Getting theme values - In this we will learn how to get specific color, theme-type, typography and density values using both, SCSS functions and CSS variables
   2. Theming Other Components - Learn how to apply Angular Material’s theming to custom components
   3. Theming Angular Material Components - How to customize styles of Angular Material components. We will take the example of MatButton and add new variants for it
8. Overrides API
   1. Overview - We will look at one more way to achieve customizations in Angular Material Components. I will show case an example to override `MatButton.
   2. All Properties - In this section, I will provide list of all the available properties for each Angular Material Components.

Pro: Advanced, interactive course (Coming soon!)

1. Everything from Basic
2. Interactive playground for each exercise, so that you don't have to worry about writing a single line in your machine
3. Future updates and additions to chapters, articles and exercises

Demo