# New course announcement This guide is written for Angular Material version 15, 16, 17. For other versions, use below links: | Version | Link | | ------------ | ------------------------------------------------------------------------ | | 13, 14 | [Article link](/articles/angular-material-theming-system-complete-guide) | | 15, 16, 17 | Continue reading | | 18 ***NEW*** | [Course link](/courses/m3-ng-components) | # Overview In this course, you will learn what Angular Material Theming is and what are some recent changes to adhere to the new module system of SASS. Then, we will set up a project with Angular Material. We will then add a custom theme in it and understand some important mixins like `core`, `define-palette`, `define-light-theme` and we will apply custom theme to Angular Material components. And we will also learn how to use a pre-built theme. After setting up the theme, we will understand typography and also modify it for header tags (`

`, `

`, etc.) for the application. Next, we will create a dark theme using `define-dark-theme`. We will implement lazy loading for dark theme, so that it only loads when needed. After adding support for multiple themes, we will learn how to apply Angular Material’s theming to custom components. We will take an example of an `alert` component and apply themes to it. We will also learn about how to customize styles of Angular Material components. We will take the example of `MatButton` and add new variants for it. ## Angular Material UI Components The Angular team builds and maintains both common UI components and tools to help us build our own custom components. `@angular/material` is [Material Design](https://material.io/) UI components for Angular applications. Angular Material also provides tools that help developers build their own custom components with common interaction patterns. ### Angular Material’s Theming System In Angular Material, a theme is a collection of color and typography options. Each theme includes three palettes that determine component colors: primary, accent and warn. Angular Material's theming system comes with a predefined set of rules for color and typography styles. The theming system is based on [Google's Material Design](https://material.io/design/material-theming/overview.html) specification. You can also customize color and typography styles for components in your application. ## SASS Basics Before moving ahead, It would be great if you have familiarity with [SASS basics](https://sass-lang.com/guide), including [variables](https://sass-lang.com/documentation/variables), [functions](https://sass-lang.com/documentation/at-rules/function), [mixins](https://sass-lang.com/documentation/at-rules/mixin), and [use](https://sass-lang.com/documentation/at-rules/use). ## New changes of SASS in Angular Material SASS introduced a new module system, including a migration from `@import` to `@use` in 2019. The [@use](https://sass-lang.com/documentation/at-rules/use) rule loads mixins, functions, and variables from other SASS stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by `@use` are called "modules". By switching to `@use` syntax, we can more easily determine what CSS is unused, and reduce the size of the compiled CSS output. Each module is included only once no matter how many times those styles are loaded. Angular Material v12 included a migration from `@import` usage to `@use` for all imports into the Angular Material SASS styles. They updated their code base for all styles with version 12. You can check out that [particular release](https://github.com/angular/components/releases/tag/12.0.0) for more information. This refactor of the theming API surface is easier to understand and read, helping developers like us take better advantage of this new module system. ## Version Compatibility The code and steps explained this course, works with below versions of Angular and Angular Material/CDK: | Supported Versions | | ------------------ | | 16 | | 17 |