Angular Material Custom Theme not Working

Question

I'm trying to use a custom theme on Angular Material but I can't get it to work. What am I doing wrong?

I have created a SCSS file that contains the new colors of the theme:

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

@include mat-core();

$md-sprimary: (
    50 : #eaeaea,
    100 : #cacaca,
    200 : #a6a6a6,
    300 : #828282,
    400 : #686868,
    500 : #4d4d4d,
    600 : #464646,
    700 : #3d3d3d,
    800 : #343434,
    900 : #252525,
    A100 : #f18282,
    A200 : #ec5454,
    A400 : #ff0e0e,
    A700 : #f30000,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #ffffff,
        A700 : #ffffff,
    )
);

$md-ssecondary: (
    50 : #feffe0,
    100 : #fdfeb3,
    200 : #fcfd80,
    300 : #fafc4d,
    400 : #f9fc26,
    500 : #f8fb00,
    600 : #f7fa00,
    700 : #f6fa00,
    800 : #f5f900,
    900 : #f3f800,
    A100 : #ffffff,
    A200 : #ffffeb,
    A400 : #fdffb8,
    A700 : #fdff9f,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$savant-theme-primary: mat-palette($md-sprimary);
$savant-theme-accent: mat-palette($md-ssecondary, A200, A100, A400);
$savant-theme-warn: mat-palette($mat-red);


html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

and I've also changed the angular.json file to reflect the scss file for my new theme:

"styles": [
    "src/custom-theme.scss",
    "src/styles.sass"
],

It compiles but the colors aren't shown.

Thanks

Answer 1

I think there are two steps you have forgotten.

1. You need to combine all your custom colors into a theme:

$my-theme: mat.define-light-theme((
    color: (
      primary: $my-primary,
      accent: $my-accent,
     )
  ));

Once you have your theme. You need to insert that theme into the the material styles:

@include angular-material-theme(my-theme)

This might work.

Answer 2

In newer angular versions, use

@include mat.all-component-themes($theme);

to apply your theme globally to the project