How to get hue/lighter color from Primary Palette

Question

So in Angular Material 2, I have my theme set up

$store-primary: mat-palette($mat-storecast);
$store-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$store-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($store-theme);

What I can't figure out from their documentation is how to get the different hue colors from the Primary Palette on i.e. a toolbar on button.

<button md-mini-fab (click)="zoomIn()" color="primary">
     <md-icon>add</md-icon>
</button>

It seems like it only understands color=primary or color=accent etc..how do you specify I want to use primary-100 or primary-500 etc ?

Answer 1

The official answer is that this is currently not possible. The color attribute that is available on most components only accepts the palette type - i.e. primary, accent or warn.

The unofficial answer if you really want to do this is that it is possible (on a component-by-component basis) if you don't mind abusing internal APIs. For example to get the A100 colour on a button, you can add a custom mixin to your theme.

// custom-button-theme.scss
@import '~@angular/material/core/theming/all-theme';
@import '~@angular/material/button/_button-theme';

@mixin custom-button-theme($theme) {

  .mat-raised-button.a100, .mat-fab.a100, .mat-mini-fab.a100 {
    // _mat-button-theme-color is a mixin defined in _button-theme.scss
    // which applies the given property, in this case background-color
    // for each of the palettes - i.e. primary, accent and warn.
    // The last parameter is the hue colour to apply.
    @include _mat-button-theme-color($theme, 'background-color', 'A100');
  }

}

Then in you main theme file you import the custom mixin.

@import 'custom-button-theme.scss';
@include custom-button-theme($store-theme);

Your button can then use the colour by adding the a100 class.

<button md-mini-fab (click)="zoomIn()" color="primary" class="a100">
  <md-icon>add</md-icon>
</button>

It is important to note however that internal APIs can change at any time. This code was tested with version 2.0.0-beta.2 - there is no guarantee that it will work with beta 3 when that comes out.

Answer 2

I use angular-material 1, I'm not sure if is the same way, but what I do is use the directive: md-colors="::{background: 'themename-primary-100'}" Of course in themename you put the theme name :P

Answer 3

For me I fixed this by creating a custom mixin in the component scss. In this mixin you can use the primary color by calling the map-get method. You need to include the mixin in your styles.scss (where you include angular-material-theme) to make this work. See example below.

Create a custom mixin from your components scss:

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

@mixin custom-component($theme) {
  $primary: map-get($theme, primary);

  mat-toolbar{
    &.p100{
      background-color: mat-color($primary, 100);
    }
  }
}

Give the toolbar in your template the class 'p100':

<mat-toolbar class="p100"></mat-toolbar>

Finally include the mixin in your styles.scss so the mixin is included in your theming:

@import 'PATH_TO_YOUR_COMPONENT/custom-component.scss'; <--------- import the custom mixin

$store-primary: mat-palette($mat-storecast);
$store-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$store-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$store-theme: mat-light-theme($store-primary, $store-accent, $store-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include custom-component($store-theme); <--------- Include it before you include angular-material-theme
@include angular-material-theme($store-theme);