素材2より多くの色変数を追加する

Question

「プライマリ」、「アクセント」、および「警告」だけでなく、より多くの色変数を追加する方法はありますか？

Answer 1

それは、あなたがこのような方法で追加する必要があり、非常に簡単です：

@import '~@angular/material/theming'; 
@include mat-core(); 

$my-app-primary: mat-palette($mat-blue-grey); 
$my-app-accent: mat-palette($mat-pink, 500, 900, A100); 
$my-app-warn: mat-palette($mat-deep-orange); 

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); 

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

.alternate-theme { 
    $alternate-primary: mat-palette($mat-light-blue); 
    $alternate-accent: mat-palette($mat-yellow, 400); 

    $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent); 

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

そして：

<md-card> 
    Main Theme: 
    <button md-raised-button color="primary"> 
    Primary 
    </button> 
    <button md-raised-button color="accent"> 
    Accent 
    </button> 
    <button md-raised-button color="warn"> 
    Warning 
    </button> 
</md-card> 

<md-card class="alternate-theme"> 
    Alternate Theme: 
    <button md-raised-button color="primary"> 
    Primary 
    </button> 
    <button md-raised-button color="accent"> 
    Accent 
    </button> 
    <button md-raised-button color="warn"> 
    Warning 
    </button> 
</md-card>