如何將調色板從www.materialpalette.com映射到Angular 2主題？

Question

以其他方式出色的下載鏈接www.materialpalette.com不支持Angular 2.例如，下載SASS給：

$primary-color-dark 
$primary-color 
$primary-color-light 
$primary-color-text 
$accent-color 
$primary-text-color 
$secondary-text-color 
$divider-color 

尋找意見上究竟如何將它們映射到角2：

$app-primary: mat-palette(…); 
$app-accent: mat-palette(…); 
$app-warn: mat-palette(…); 

Answer 1

使用http://mcg.mbitson.com/#!/生成基於由materialpalette提供的顏色的調色板所以最後你得到一個包含文件你的顏色，例如/assets/your-palette.scss：

$mat-your-palette: (
    50 : #e8eaf6, 
    100 : #c5cbe9, 
    200 : #9fa8da, 
    300 : #7985cb, 
    400 : #5c6bc0, 
    500 : #3f51b5, 
    600 : #394aae, 
    700 : #3140a5, 
    800 : #29379d, 
    900 : #1b278d, 
    A100 : #c6cbff, 
    A200 : #939dff, 
    A400 : #606eff, 
    A700 : #4757ff, 
    contrast: (
     50 : #000000, 
     100 : #000000, 
     200 : #000000, 
     300 : #000000, 
     400 : #ffffff, 
     500 : #ffffff, 
     600 : #ffffff, 
     700 : #ffffff, 
     800 : #ffffff, 
     900 : #ffffff, 
     A100 : #000000, 
     A200 : #000000, 
     A400 : #ffffff, 
     A700 : #ffffff, 
    ) 
); 

然後根據上面的文件，你必須創建一個主題，如/assets/theme.scss：

@import '~@angular/material/_theming.scss'; 
@import './your-palette.scss'; 
@include mat-core(); 
$primary: mat-palette($mat-your-palette, 500); 
$accent: mat-palette($mat-your-palette, A100); 
$warn: mat-palette($mat-your-palette, A200); 
$theme: mat-light-theme($primary, $accent, $warn); 
@include angular-material-theme($theme); 

然後導入主題@import '/assets/theme';在styles.scss和你做。
同時檢查docs有關如何主題您的應用程序

更新的詳細信息： 找出顏色自定義主題可能是一個有點棘手。目前建material2主題，你只需要提供3種顏色$primary，$accent和$warn按Theming Guide：

• 一個primary palette：顏色在所有屏幕和 成分最廣泛的應用。
• accent palette：用於浮動動作的顏色 按鈕和交互式元素。
• A warn palette：顏色用於 傳達錯誤狀態。