Angular Material Custom Component Theming

Question

I am trying to use colors from my custom color pallette in my custom Angular Material theme for some other components.

For example a div with a mat-toolbar and an icon w

Answer 1

I described it in this stack overflow answer.

You should put the theme related variables and the theme creation in separate files:

• styles/_variables.scss
  • can be imported in all component scss files
  • uses @import '~@angular/material/theming'; to make material specific mixins available
  • contains typical theme variables like $primary, $accent and $warn
  • contains one or more $theme variables (e.g. via mat-light-theme($primary, $accent, $warn);)

• theme.scss

  • should not be imported anywhere else

  • includes Angular Material core and theme

    @import 'variables';
    @include mat-core();
    @include angular-material-theme($theme);
    

To easily import the styles/_variables.scss into your component styles you have to add stylePreprocessorOptions to the angular.json file:

"styles": [
  "src/styles.scss",
  "src/theme.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
},

Now you can import you custom variables and theme variables in your component and use also material specific mixins like mat-color:

@import 'variables';

$background: map-get($theme, background);

.custom-class-a {
  background-color: mat-color($background, card);
  color: mat-color($mat-green, 700);
}