STEP_7.md

Quick Jump

• Initial Setup
• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6
• Step 7 <-
• Step 8
• Step 9
• Step 10

Step #7 Task:

Add themes with the theming mixins provided by Material.

File: src/theme.scss

@import '~@angular/material/_theming';

@include mat-core();

$primary: mat-palette($mat-red);
$accent: mat-palette($mat-blue);

$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

You can choose your palettes out of the Material Design Color Palettes spec

Tell angular-cli to also compile the themes file, because angular-cli uses webpack, The Angular CLI has a built-in plugin to compile scss for us, so all we have to do is include it in the styles section.

File: angular-cli.json

{
  "apps": [
    {
      "styles": [
        "styles.css",
        "theme.scss"
      ]
    }
  ]
}

The prebuilt theme that has been included in Step 1 is now unused and can be deleted.

Tips

1. Angular CLI

The Angular CLI won't notice the changes in the angular-cli.json file. Restarting the serve task will do the trick.

---

Go to Tutorial Step 8