Angular Material: Creating a Custom Theme

In our introduction to Angular Material 2, we showed how to use one of the pre-built themes, but it’s just as easy to create a custom theme. This will allow you to specify primary, accent and warning colors that will be used on Angular Material components.

Your custom theme will be a Sass file and in our case we’ll call it theme.scss and place it in our app’s /src folder.

Don’t worry if you don’t use Sass for your the rest of your app. If you’re using the Angular CLI, you can simply add your Sass file to the list of styles in the .angular-cli.json configuration file and the Angular CLI will take care of compiling the css file:

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

In the theme file, you’ll want to first import the main theming Sass file from Angular Material and include the base styles:

@import '~@angular/material/theming';
@include mat-core();

Next, you’ll declare variables for your primary, accent and warning colors using the mat-palette function.

mat-palette takes a color name as its first argument, and the remaining optional second, third and fourth arguments define a default value, a lighter value and a darker value. The color names and values themselves are taken from the official Material Design color guidelines:

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);

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

We finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function, and finally include the result of calling the angular-material-theme function with our $my-app-theme.

Additional and Alternate Themes

You can also create alternate themes if you’re feeling so inclined by nesting a theme definition inside a class. You’ll then simply add the class name to a parent element in your templates for the alternate theme to take effect.

Here’s our full file, with an alternate theme:

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
.alternate-theme {
  $alternate-primary: mat-palette($mat-light-blue);
  $alternate-accent:  mat-palette($mat-yellow, 400);
  $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);

Here’s how our two themes look:

<mat-card>
  Main Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>

<mat-card class="alternate-theme">
  Alternate Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>