Angular Material Components Theming System: Complete Guide

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)
Dharmen Shah
Written by Dharmen Shah

I have around 8+ years of experience in IT industry. I have got opportunity to work at different companies with different technologies, mostly focused on Front-end, like Angular, React, Next, vanilla web stack (HTML, CSS, JavaScript).

You can find me on Twitter, Linkedin and Github.

Previous

Update Angular Material to latest version

Envelop
Don't miss any update

Stay up to date

Subscribe to the newsletter to stay up to date with articles, courses and much more!

Angular Material Dev

Angular Material Dev is one place stop for developers to learn about integrating Material Design in Angular applications like a pro.

Find us on X (Twitter) and LinkedIn