Как получить оттенок/светлый цвет из палитры Primary

Question

Так углового материал 2, я моя тема создан

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

То, что я не могу понять из их документации, как получить различные цвета оттенка из основной палитры, т.е. на панели инструментов на кнопке.

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

Похоже, что это понимает только цвет = первичный или цвет = акцент etc..how вы определяете я хочу использовать первичный-100 или первичный-500 и т.д.?

Answer 1

Официальный ответ заключается в том, что в настоящее время это невозможно. Атрибут color, который доступен на большинстве компонентов, принимает только тип палитры - то есть первичный, акцент или предупреждение.

Неофициальный ответ, если вы действительно хотите это сделать, заключается в том, что это возможно (по отдельности), если вы не против злоупотреблять внутренними API-интерфейсами. Например, чтобы получить цвет A100 на кнопке, вы можете добавить собственный микшинг к своей теме.

// 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'); 
    } 

} 

После этого в главном файле темы вы импортируете пользовательский mixin.

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

Ваша кнопка может использовать цвет, добавив a100 класс.

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

Важно отметить, что внутренние API могут меняться в любое время. Этот код был протестирован с версией 2.0.0-beta.2 - нет гарантии, что он будет работать с бета-версией 3, когда это произойдет.

Answer 2

Я использую угловой-материал 1, я не уверен, если это тот же самый путь, но то, что я делаю, это использовать директиву: md-colors="::{background: 'themename-primary-100'}" Конечно в themename вы кладете название темы: P