Define a Theme

This section explains how to define a theme in the library. We will take as an example defining a theme for the company "Acme". The procedure consists of 3 steps:

1. Defining the color palettes for the theme:

2. Defining the theme

3. Applying the theme in the application

Defining the color palettes for the theme:

You can define any color with all the shades needed in SASS Angular Material 2. Example of defining a special red color palette for Acme in SASS in a file called "acme.palettes.scss":

$acme-lime: (
  50: #f9fbe7,
  100: #f0f4c3,
  200: #e6ee9c,
  300: #dce775,
  400: #d4e157,
  500: #cddc39,
  600: #c0ca33,
  700: #afb42b,
  800: #9e9d24,
  900: #827717,
  A100: #f4ff81,
  A200: #eeff41,
  A400: #c6ff00,
  A700: #aeea00,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: $black-87-opacity,
    600: $black-87-opacity,
    700: $black-87-opacity,
    800: $black-87-opacity,
    900: white,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: $black-87-opacity,
  )
);

Design all your needed palettes in this file and then move to the next step.

Defining the Theme:

After defining all the colors needed in the shown fashion, the next step is to define the global theme for Acme by following the next steps:

1. Create a file called "name.theme.scss"

2. Import the palettes file you defined in the previous step using "@import 'path/to/file".

3. Follow the below syntax to create your customized theme.

Example of defining a theme for Acme in SASS:

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

@import 'path/to/acme.palettes'; /* Notice importing the palettes */

.acme-theme {
    $primary: mat-palette($acme-lime);
    $accent: mat-palette($acme-amber, A200, A100, A400);
    $warn: mat-palette($acme-deep-orange);
    $theme: mat-light-theme($primary, $accent, $warn);
    @include angular-material-theme($theme);
}

Applying the theme in the Application:

To apply the new theme on the application level, you can either set the new theme as a global theme in the styles.scss file where all the components will adopt that theme:

@import 'path/to/acme.theme.scss';

or import the customized theme file into your components scss file and add the name of the theme to the class property of your component. For example, applying the Acme theme to a button component:

<button md-button class="acme-theme" color="primary" (click)="function()"></button>