AngularCLI自定义主题（二）

AngularCLI自定义主题（二）

修改文件Angular Material主调色板的字体颜色

一个主题可以通过多个调色板来创建，在通常情况下，我们只修改
/主调色板中：在所有屏幕和组件中使用最广泛的颜色/
/重音调色板：用于浮动按钮和交互式原色的颜色/
/警告调色板：用于传达错误状态的颜色/

/*引入material自定义主题支持*/
@import '[email protected]/material/theming';
/*引入material公用的主题风格*/
@include mat-core();

/* 自定义颜色*/
/*主调色板中：在所有屏幕和组件中使用最广泛的颜色*/
$my-app-primary: mat-palette($mat-blue,800);
/*重音调色板：用于浮动按钮和交互式原色的颜色*/
$my-app-accent: mat-palette($mat-teal,600);
/*警告调色板：用于传达错误状态的颜色*/
$my-app-warn: mat-palette($mat-red,700);
/*利用自定义颜色组装自定义主题*/
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

那么如何修改主调色板的字体颜色呢？参考资料比较少，在此，通过一些网上资料写一篇作为自己的笔记
1.创建@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),
    );
};

// 你可以选择任何颜色
$my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700));

2.把前面创建的主题与此合并，开始新的主题

$my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground));

3.提交主题

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