CODEWITHSUNDEEP
angularangular-material
pankaj
pankaj

Reputation: 1060

Implementing custom theme in material2

I have to implement custom theming in my angular2 app. I have been provided a color file like this:

   $color-material-blue-T50: fade($color-material-500, 12%);
   $color-material-blue-T100: fade($color-material-500, 26%);
   $color-material-blue-T200: fade($color-material-500, 54%);
   $color-material-blue-T400: fade($color-material-500, 87%);
   $color-material-white: #ffffff;
   $color-material-500:#2196f3;
   $color-material-white: #ffffff;
   $color-primary: $color-material-white;
   $color-accent: $color-material-500;
   $color-warning: $color-material-amber-A700;
   $color-material-amber-A600:#FFBC00;
   $color-material-amber-A700:#FFAB00;
   $color-material-amber-A800:#ff9000;

I have created a custom-theming file as below: 

$my-app-primary: mat-palette($color-primary);
$my-app-accent:  mat-palette($color-accent, A200, A100, A400);
$my-app-warn:    mat-palette($color-warning);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent,$my-app-warn);
@include angular-material-theme($my-app-theme);

This gives me an error Argument $map of map-get($map, $key) must be a map. I m not sure how to use colors given to me to used for applying custom theme.

Upvotes: 1

Views: 285

Answers (1)

Will Howell
Will Howell

Reputation: 3715

If you are going to create a custom palette, it should match the same structure, as the default Material ones. They look like this:

$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

You don't need to provide every singe value, just the ones you use for default, lighter, and darker. You also need to be sure to have a corresponding contrast value for each value that you do define.

EDIT: so yours would look something like

$my-custom-palette: (
  200: $my-light-palette-color,
  500: $my-default-palette-color,
  900: $my-dark-palette-color,
  contrast: (
    200: $black-87-opacity,
    500: $black-87-opacity,
    900: $white-87-opacity,
  )
);

$my-app-primary: mat-palette($my-custom-palette, 500, 200, 900);
$my-app-accent: mat-palette($mat-pink);

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

Upvotes: 2

Related Questions