如何更改Angular Material2中主調色板的字體顏色？

Question

在官方theming documentation of Angular Material2它明確規定了以下內容：

在角材料，主題是通過組合多個調色板創建。特別是，一個主題包括：

• 主調色板：所有屏幕和組件中使用最廣泛的顏色。
• 重音調色板：用於浮動動作按鈕和交互式元素的顏色。
• 警告調色板：用於傳達錯誤狀態的顏色。
• 前景調色板：文本和圖標的顏色。
• 背景調色板：用於元素背景的顏色。

但在每一個例子，他們只有前三個修改：

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

$candy-app-primary: mat-palette($mat-indigo); 
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400); 
$candy-app-warn: mat-palette($mat-red); 
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 

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

所以我的問題是：我怎樣才能改變前景調色板，以改變文字的顏色爲主要或輔助調色板？

有一些網站（materialpalette.com,material.io）顯示顏色調色板，以便於可視化，但他們仍然沒有說如何包含或修改Angular Material2中的調色板。

Answer 1

您可以更改默認主題顏色通過創建自己的前景圖和初始化之前它合併到創建的主題這裏是如何：。

1. 構建主題對象像往常一樣

   @import '@angular/material/theming.scss'; 
   @include mat-core(); 
   
   // Choose colors 
   $my-app-primary: mat-palette($mat-blue-grey); 
   $my-app-accent: mat-palette($mat-light-green); 
   $my-app-warn: mat-palette($mat-red); 
   
   // Build theme object (its practically a map object) 
   $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); 
   

2. 使用返回前景地圖的自定義函數構建自定義前景，如@angular/material/_theming.scss - >$mat-light-theme-foreground函數中所定義。
   您可以使用地圖進行遊戲，只定義您想要的字段並將其他字段保留爲默認字段。

   @function my-mat-light-theme-foreground($color) { 
       @return (
        base:    $color, 
        divider:   $black-12-opacity, 
        dividers:   $black-12-opacity, 
        disabled:   rgba($color, 0.38), 
        disabled-button: rgba($color, 0.38), 
        disabled-text:  rgba($color, 0.38), 
        hint-text:   rgba($color, 0.38), 
        secondary-text: rgba($color, 0.54), 
        icon:    rgba($color, 0.54), 
        icons:    rgba($color, 0.54), 
        text:    rgba($color, 0.87), 
        slider-off:  rgba($color, 0.26), 
        slider-off-active: rgba($color, 0.38), 
       ); 
   }; 
   
   // You can put any color here. I've chosen mat-color($my-app-primary, 700) 
   $my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700)); 
   

3. 合併以前創建的主題，只是前景圖和初始化自定義主題。
   注意：由於SCSS中的所有地圖都是不可變的，因此map-merge()會返回新的地圖實例，並且不會修改地圖 - 因此我們有另一個變量$my-app-theme-custom來保存結果主題。

   $my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground)); 
   
   // Include your custom theme. 
   @include angular-material-theme($my-app-theme-custom); 
   

注：我使用角材質V2.0.0-beta.8

Answer 2

下面的代碼：

// Foreground palette for light themes. 
$mat-light-theme-foreground: (
    base:   black, 
    divider:   rgba(black, 0.12), 
    dividers:  rgba(black, 0.12), 
    disabled:  rgba(black, 0.38), 
    disabled-button: rgba(black, 0.38), 
    disabled-text: rgba(black, 0.38), 
    hint-text:  rgba(black, 0.38), 
    secondary-text: rgba(black, 0.54), 
    icon:   rgba(black, 0.54), 
    icons:   rgba(black, 0.54), 
    text:   rgba(black, 0.87) 
); 

你可以找到在地圖：\ node_modules \ @angular \材料\核心\主題化\ _palette.scss

範例檢索 '次級文本'：

$foreground: map-get($theme, foreground); 

.foreground-color { 
    color: mat-color($foreground, secondary-text); 
} 

Answer 3

該指南位於文檔網站here。

首先，您定義的調色板爲您的主題，如$primary，$accent，$warn（在引導他們$candy-app-前綴），然後創建一個$theme對象：

// Create the theme object (a Sass map containing all of the palettes). 
$theme: mat-light-theme($primary, $accent, $warn); 

一旦我們有一個主題，這包含所有調色板，我們可以從它那裏得到一個前景調色板：

$foreground: map-get($theme, foreground); 

從$foreground調色板中我們可以得到基於密鑰的任何值，如

secondary-text: rgba(black, 0.54), 

或

text: rgba(black, 0.87) 

下面的代碼檢索secondary-text屬性：

color: mat-color($foreground, secondary-text); 

我從2.0.0-beta.2切換到2.0.0-beta.3和文件夾結構看起來不一樣，你是對的。 現在是\node_modules\@angular\material\_theming.scss,_palette.scss文件不見了。你可以爲它做全局搜索，但：「$墊深色主題背景：（」

_theming.scss具有所有的顏色，地圖和所有的功能，如mat-color