Custom Theme with Angular Material 2 - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

Configure project to use SCSS:

• ng set defaults.styleExt scss
• Update .angular-cli.json:

"styles": [
    "styles.scss"
]

Link: https://stackoverflow.com/questions/36220256/angular2-angular-cli-sass-options

Create custom theme:

• Create color palette in variables.scss

// Define the color palettes
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);

• Create theme.scss file for defining custom theme

// Include the common styles for Angular Material.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component
@include angular-material-theme($app-theme);

• Include it in .angular-cli.json

"styles": [
    "styles.scss",
    "theme.scss"
]

Link: https://material.angular.io/guide/theming

Access variables in variables.scss

• Include variables.scss: @import "variables.scss"
• Extract color by using mat-color mixin:

div {
   background-color: mat-color($app-primary)
}

Link: https://material.angular.io/guide/theming-your-components