How to include custom material themes into components without duplicating mixins: mat-core and angular-material-theme
I came across the same problem, some of the discussion can be found here, and an insighful blog dealing with the issue here.
Point is that - as the theming guide correctly states - you should never import mixins @include mat-core()
and @include angular-material-theme($your-theme)
more than once in your entire project. But when you're working with SASS in your components, you often do want to refer to your theme variables and mat-color palette. It's tempting to import your entire theme into the component SASS, accidentally duplicating the material mixins.
The solution I ended up with I think is the one the theming guide describes
the definition of the theme object should be broken into its own file, separate from the inclusion of the mat-core and angular-material-theme mixins
but since it was initially unclear to me how to do it, here's a step by step for anyone stuck with the same:
- create a
assets/styles/partials
folder containing SASS partials
My folder looks like this:
assets/styles/partials/
_palette.scss // custom material palettes
_scaffolding.scss // general mixins
_theme.scss // <-- our theme definition
_variables.scss // global variables like fonts and colors
The _theme
partial contains the following:
// assets/styles/partials/_theme.scss
@import '~@angular/material/theming';
@import 'variables';
@import 'scaffolding';
@import 'palette';
$my-primary: mat-palette($mat-primary);
$my-accent: mat-palette($mat-accent);
$my-warn: mat-palette($mat-warn);
$my-theme: mat-light-theme($my-primary, $my-accent);
That's it. Do not include the material mixins mat-core
and angular-material-theme
in this file.
- create a global theme file
assets/styles/my-theme.scss
. It contains just three lines:
// assets/styles/my-theme.scss
@import 'partials/theme'; // our actual theme definition
@include mat-core(); // the required mat-core mixin
@include angular-material-theme($my-theme); // the declaration of our custom material theme
By doing this we have separated our theme partial, including all our custome palette, scaffolding and variables, from the file that includes mat-core and our custom material theme.
- In Angular.json, declare your my-theme file as global under styles
"styles": [ "src/assets/styles/my-theme.scss" ]
With this, our app uses our custom material theme throughout, but because the theme definition (in the theme
partial) is separate from the inclusion of material mixins (in my-theme
), we can safely include our theme
partial into any component without duplicating any css.
Optionally, you can simplify the import of our theme partial by adding the partials path to the stylePreprocessorOptions in Angular.json:
"build": {
(...)
"options": {
(...)
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/styles/partials"
]
}
}
}
Simply @import 'theme'
in any component scss file and we have access to all our variables and the material theming functions such as mat-color :)