Theming Angular material is pretty simple but there is very little documentation on it.
First you need to create a theme scss file and add it to your styles array.
Example theme.scss
@import'~@angular/material/theming';// Plus imports for other components in your app.// Include the common styles for Angular Material. We include this here so that you only// have to load a single css file for Angular Material in your app.// Be sure that you only ever include this mixin once!@include mat-core();// Define the palettes for your theme using the Material Design palettes available in palette.scss// (imported above). For each palette, you can optionally specify a default, lighter, and darker// hue. Available color palettes: https://material.io/design/color/$candy-app-primary:mat-palette($mat-indigo);$candy-app-accent:mat-palette($mat-pink,A200,A100,A400);// The warn palette is optional (defaults to red).$candy-app-warn:mat-palette($mat-red);// Create the theme object. A theme consists of configurations for individual// theming systems such as `color` or `typography`.$candy-app-theme:mat-light-theme((color:(primary:$candy-app-primary,accent:$candy-app-accent,warn:$candy-app-warn,<br/>)));// Include theme styles for core and each component used in your app.// Alternatively, you can import and @include the theme mixins for each component// that you are using.@include angular-material-theme($candy-app-theme);
For each component you want to theme, you should create a mixin.
This mixin will contain custom CSS rules for your component based on the global theme.
Example Mixin
You can call this my_component.component.scss-theme.scss.
Within Google, they name theme files my_component-theme.scss and the main scss file my_component.scss.
This file should not be included in your @Component's styleUrls.
// Import library functions for theme creation.@import'~@angular/material/theming';@mixin candy-carousel-color($config-or-theme){// Extract the color configuration in case a theme has been passed.// This allows consumers to either pass a theme object or a color configuration.$config:mat-get-color-config($config-or-theme);// Extract the palettes you need from the theme definition.$primary:map-get($config,primary);$accent:map-get($config,accent);// Define any styles affected by the theme..candy-carousel{// Use mat-color to extract individual colors from a palette.background-color:mat-color($config);border-color:mat-color($config,A400);}}@mixin candy-carousel-typography($config-or-theme){// Extract the typography configuration in case a theme has been passed.$config:mat-get-typography-config($config-or-theme);.candy-carousel{font:{family:mat-font-family($config,body-1);size:mat-font-size($config,body-1);weight:mat-font-weight($config,body-1);}}}@mixin candy-carousel-theme($theme){// Extracts the color and typography configurations from the theme.$color:mat-get-color-config($theme);$typography:mat-get-typography-config($theme);// Do not generate styles if configurations for individual theming// systems have been explicitly set to `null`.@if$color!=null{@include candy-carousel-color($color);}@if$typography!=null{@include candy-carousel-typography($typography);}}
Next, in your main app theme file, import this mixin and pass in your global app theme:
Example theme.scss
// Import library functions for theme creation.
@import './my_component/my_component.component.scss-theme.scss';
//... Build your theme.
// Include theme styles for your custom components.
@include candy-carousel-theme($theme);
Color Palettes
Get a color palette like this:
$config:mat-get-color-config($config-or-theme);// Color Palettes$primary:map-get($config,primary);$accent:map-get($config,accent);$warn:map-get($config,warn);$foreground:map-get($config,foreground);$background:map-get($config,background);
To get a specific color from a palette, use mat-color($palette, $key):
a{color:mat-color($foreground,text);}// mat-color($primary, 50); is the lightest color// mat-color($primary, 900); is the darkest color// mat-color($primary, lighter); defaults to 100// mat-color($primary); defaults to 500// mat-color($primary, darker); defaults to 700// mat-color($primary, '500-contrast'); gets contrast colors for text
Some keys for foreground include: base, divider, text.
See _palette.scss for all available keys.
See _theming.scss for a more in-depth understanding about theming.