How to get a hue / light color from the main palette

Question

So, in Angular Material 2, I have my theme installed

$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 understand from their documentation is how to get different hue colors from the main palette, that is, on the toolbar on the button.

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

It seems that he understands only color = primary or color = accent, etc., as you indicate, 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, available on most components, accepts only the type of palette — that is, primary, accent, or warning.

The unofficial answer, if you really want to do this, is that it is possible (individually) if you do not mind abusing the internal APIs. For example, to get the A100 color on a button, you can add custom mixing 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 - ie primary, accent and warn. // The last parameter is the hue colour to apply. @include _mat-button-theme-color($theme, 'background-color', 'A100'); } } 

Then, in the 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 color 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 that internal APIs can change at any time. This code has been tested with version 2.0.0-beta.2 - there is no guarantee that it will work with beta 3 when this happens.

Answer 2

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

Answer 3

I fixed this by creating my own mixin in the scss component. In this mixin, you can use the foreground color by calling the map-get method. You must enable mixin in your styles.scss (where you include angular-material-theme) to make this work. See an example below.

Create your own mixin from your scss components:

 @import ' ~@angular /material/theming'; @mixin custom-component($theme) { $primary: map-get($theme, primary); mat-toolbar{ &.p100{ background-color: mat-color($primary, 100); } } } 

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

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

Finally, include the mixin in your styles.scss so that it is included in your themes:

 @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);