如何更改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