Angular Material Components Theming System: Complete Guide

# Final Notes In this course, we first learned about what Angular Material Theming is and it is based on [Google's Material Design](https://material.io/design/material-theming/overview.html) specification. We started with a blank project and added Angular Material. Next, we understood the `core` mixin, `define-palette` function, palettes and `define-light-theme` function and we created a custom theme. And then we applied our custom theme to first all components using `all-components-theme` and at last we optimized it to use only `core-theme` and `button-theme` and reduced final styles size. We also learned how to use a pre-built theme by adding the theme's stylesheet path in the `styles` array of `angular.json`. For example, we can add `./node_modules/@angular/material/prebuilt-themes/indigo-pink.css` to use the `indigo-pink` theme in our application. Then we started with typography. We first understood typography levels and how to create one using `define-typography-level`. Next, we learned that Angular Material handles all those levels using typography config, and Angular Material represents this configuration as a SASS map. We created a custom config using `define-typography-config` and applied it to `typography` option in `define-light-theme` mixin, so that custom typography is applied to the whole application. Next we created a dark theme in a separate file `styles/themes/dark.scss`. Then we used only color mixins, i.e. `core-color` and `button-color`, and not theme mixing to avoid duplicate style generation. And at last, we made changes in `angular.json` so that dark theme is loaded on demand only when needed. Then we followed a step-by-step process to add support for Angular Material’s Theming system to custom components. And at last, we learned about how to customise Angular Material’s button component, i.e. [`MatButton`](https://material.angular.io/components/button/overview). In this, we covered how to change color, size and shape of the buttons. ## Important Mixins Below are some important SASS mixins/functions with respect to Angular Material Theming: | Mixin/function | Scope | Usage | Include only once | Can be included more than once | | -- | -- | -- | -- | -- | | `mat.core()` | Application | Main mixin to enable core Angular Material theming | ✅ | ❌ | | `mat.define-palette($palette)` | None | Constructing the theme first requires defining primary and accent palettes, this function is used there. | ❌ | ✅ | | `mat.define-light-theme($map)` or `mat.define-dark-theme($map)` | None | You can construct a theme by calling either `define-light-theme` or `define-dark-theme` with the result from `define-palette`. The choice of a light versus a dark theme determines the background and foreground colors used throughout the components. | ❌ | ✅ | | `mat.all-component-themes($theme)` | All Components Themes | This mixin emit styles for `core-theme` and all 35+ components in Angular Material. Unless your application uses every single component, this will produce unnecessary CSS. For next theme, use `mat.all-component-colors($next-theme)` mixin to avoid further duplicate styles. | ✅ (Recommended) | ❌ (Recommended) | | `mat.-theme($theme)` | Component Theme | This mixin emits color, typography, or density styles based on configuration of `define-light-theme` or `define-dark-theme`. For next theme, use `mat.-color($next-theme)` mixin to avoid further duplicate styles. | ✅ (Recommended) | ❌ (Recommended) | | `mat.define-typography-level($map)` | None | Constructing the custom typography config requires defining different typography levels, this function is used there. | ✅ (Recommended) | ❌ (Recommended) | | `mat.define-typography-config($config)` | None | A **typography config** is a collection of all typography levels. Angular Material represents this config as a Sass map. This map contains the styles for each level, keyed by name. You can create a typography config with the `define-typography-config` Sass function. Every parameter for `define-typography-config` is optional; the styles for a level will default to Material Design's baseline if unspecified. | ✅ (Recommended) | ❌ (Recommended) | ## Live Playground Code is available on Github at [Angular-Material-Dev/course-md-ng-my-app](https://github.com/Angular-Material-Dev/course-md-ng-my-app)