How to use Angular Material custom- palette colors effectively Angular Material

Question

I am using a custom material-color palette. defined the primary and accent palettes with its default-shade,darker-shade,lighter-shade as below:

  $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
$my-app-accent:  mat-palette($md-lightaccent, 500,900,A100);
$my-app-warn:    mat-palette($md-warn);

/*finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function,*/
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
/* and finally include the result of calling the angular-material-theme function with our $my-app-theme.*/
@include angular-material-theme($my-app-theme);

Questions:

1. If i use in code color="primary" or color="accent" than it sets the default color shade, Question is, how to use the lighter and darker-shades that we have used as part of initial setting of the theme.

2. How to use any other shades from the palette for the primary or accent shades.

score 3 · Answer 1 · answered Nov 01 '18 at 09:32

Check the code i written below. check the commented lines for usage

Theme.scss

  $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 );
  $my-app-accent:  mat-palette($md-lightaccent, 500,900,A100);
  $my-app-warn:    mat-palette($md-warn);

  $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives light theme
  $my-app-dark-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn); //gives dark version of the above theme

  //apply this class to any element you want to apply dark theme or set class to <body> so apply it to whole site
  .dark-theme { 
      @include angular-material-theme($my-app-dark-theme);
  }
  @include angular-material-theme($my-app-theme); //default theme

score 2 · Answer 2 · answered May 13 '19 at 14:55

As far as I know, there is no easy way to use the non-default shades from your custom palette by simply modifying the HTML (i.e. <button color="primary-lighter"> does not work).

The easiest way I've found is to include custom themes in your Theme.scss file, such as:

$my-accentpalette: ( 50 : #f9f2eb, ... A700 : #ffae71, contrast: ( 50 : #000000, ..., A700 : #000000, ) );

.lighter-style {
        background-color: mat-color($my-accentpalette, 200);
        color: mat-contrast($my-accentpalette, 200);
}

(Note I just picked the '200' entry from the palette, pick whatever you want). Then you can apply the style to any HTML element you want:

<button class="lighter-style">

Some supporting links that I found helpful:

score 0 · Answer 3 · answered Jun 21 '19 at 18:31

I also have similar issue with material angular shades. As i cannot find solution (omitting the possibility of using classes that will refer to other theme) in web i used normal scss built-in function such as below:

@import "./../../my-theme.scss";

a{
 color: darken($accent, 30%);
}

How to use Angular Material custom- palette colors effectively Angular Material

3 Answers3