角度素材（2+）でカスタムカラー変数を追加

Question

angular materialのカスタムカラーを作成するにはどうすればいいですか？例えば

success（緑色）のような色、warn（イエロー）、danger（赤）、primary（青）の横に、accent（ピンク）のようなブートストラップ。すなわち

：HTMLでそれを使用するための（2+）角度材料の色variablenを拡張属性：

<button mat-raised-button color="success">Success</button> 

等白チェックボックスの作成：

<mat-checkbox color="white">Check me!</mat-checkbox> 

Answer 1

変数が定義されているが"_theming.scss"の "node_modules/@ angular/material /"にあります。カスタム変数を定義するには、以下の関数を変更する必要があります。同じファイル内

// Creates a container object for a light theme to be given to individual component theme mixins. 
@function mat-light-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) { 
    @return (
    success:$success, 
    primary: $primary, 
    accent: $accent, 
    warn: $warn, 
    is-dark: false, 
    foreground: $mat-light-theme-foreground, 
    background: $mat-light-theme-background, 
); 
} 

// Creates a container object for a dark theme to be given to individual component theme mixins. 
@function mat-dark-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) { 
    @return (
    success:$success, 
    primary: $primary, 
    accent: $accent, 
    warn: $warn, 
    is-dark: true, 
    foreground: $mat-dark-theme-foreground, 
    background: $mat-dark-theme-background, 
); 
} 

私はボタンのためにそれを適用して、我々はまた、コンポーネントに新たに導入された変数 を適用することができます。

：

// Applies a focus style to an md-button element for each of the supported palettes. 
@mixin _mat-button-focus-color($theme) { 
    $success: map-get($theme, success); 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 
    $warn: map-get($theme, warn); 

    &.mat-success .mat-button-focus-overlay { 
    background-color: mat-color($success, 0.12); 
    } 
    &.mat-primary .mat-button-focus-overlay { 
    background-color: mat-color($primary, 0.12); 
    } 
    &.mat-accent .mat-button-focus-overlay { 
    background-color: mat-color($accent, 0.12); 
    } 

    &.mat-warn .mat-button-focus-overlay { 
    background-color: mat-color($warn, 0.12); 
    } 

    &[disabled] .mat-button-focus-overlay { 
    background-color: transparent; 
    } 
} 

@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) { 
    $success: map-get($theme, success); 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 
    $warn: map-get($theme, warn); 

    &.mat-success .mat-ripple-element { 
    background-color: mat-color($success, $hue, $opacity); 
    } 
    &.mat-primary .mat-ripple-element { 
    background-color: mat-color($primary, $hue, $opacity); 
    } 
    &.mat-accent .mat-ripple-element { 
    background-color: mat-color($accent, $hue, $opacity); 
    } 

    &.mat-warn .mat-ripple-element { 
    background-color: mat-color($warn, $hue, $opacity); 
    } 
} 

// Applies a property to an md-button element for each of the supported palettes. 
@mixin _mat-button-theme-color($theme, $property, $color: 'default') { 
    $success: map-get($theme, success); 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 
    $warn: map-get($theme, warn); 
    $background: map-get($theme, background); 
    $foreground: map-get($theme, foreground); 

    &.mat-success { 
    #{$property}: mat-color($success, $color); 
    } 
    &.mat-primary { 
    #{$property}: mat-color($primary, $color); 
    } 
    &.mat-accent { 
    #{$property}: mat-color($accent, $color); 
    } 
    &.mat-warn { 
    #{$property}: mat-color($warn, $color); 
    } 

    &.mat-success ,&.mat-primary, &.mat-accent, &.mat-warn, &[disabled] { 
    &[disabled] { 
     $palette: if($property == 'color', $foreground, $background); 
     #{$property}: mat-color($palette, disabled-button); 
    } 
    } 
} 

@mixin mat-button-theme($theme) { 
    $success: map-get($theme, success); 
    $primary: map-get($theme, primary); 
    $accent: map-get($theme, accent); 
    $warn: map-get($theme, warn); 
    $background: map-get($theme, background); 
    $foreground: map-get($theme, foreground); 

    .mat-button, .mat-icon-button { 
    background: transparent; 

    @include _mat-button-focus-color($theme); 
    @include _mat-button-theme-color($theme, 'color'); 
    } 

そして新しいカスタム変数は、 "theme.scss" ファイル

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

@include mat-core(); 

$primary: mat-palette($mat-green); 
$accent: mat-palette($mat-blue); 
$warn: mat-palette($mat-blue); 
$success: mat-palette($mat-blue); 
$theme: mat-light-theme($success,$primary, $accent,$warn); 

@include angular-material-theme($theme); 

.dark-theme { 
    $dark-success: mat-palette($mat-light-blue); 
    $dark-primary: mat-palette($mat-light-blue); 
    $dark-accent: mat-palette($mat-green); 

    $dark-theme: mat-dark-theme($dark-success, $dark-primary, $dark-accent); 

    @include angular-material-theme($dark-theme); 
} 

今、私たちは、HTML内の新しい変数を使用することができます内側に追加することができます

<button md-button color="success">Primary</button> 

後は、変更_theming.scss https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates

ノートへのリンクです：私たちは角-材料のパッケージをアップグレードしながら、「_theming.scss」ファイルの世話をする必要があります。