如何更改Angular Material2中的主调色板的字体颜色？ [英] How to change font color of primary palette in Angular Material2?
问题描述
在 Angular Material2的主题文档中，显然以下内容：
在Angular Material中，通过组合多个调色板来创建主题。特别是，一个主题由以下几部分组成：
- 主调色板：所有屏幕和组件中使用最广泛的颜色。 $ b
- 调色板：用于浮动动作按钮和交互式元素的颜色。
- 警告调色板：用于传达错误状态的颜色。
- 背景调色板：用于元素背景的颜色
但是在每个例子中，他们只修改前三个：
@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 material.io ），它们显示的颜色调色板易于可视化，但他们仍然没有说如何在Angular Material2中包含或修改该调色板。 解决方案
您可以通过创建自己的前景地图来更改默认的主题颜色，并在初始化之前将其合并到创建的主题中。这里是如何：
$ b $ ol <
像往常一样构建主题对象。
@import'@ angular / material / theming.scss';
@include mat-core（）;
//选择颜色
$ my-app-primary：mat-palette（$ mat-blue-grey）;
$ my-app-accent：mat-palette（$ mat-light-green）;
$ my-app-warn：mat-palette（$ mat-red）;
$ b $ //构建主题对象（实际上是一个地图对象）
$ my-app-theme：mat-light-theme（$ my-app-primary，$ my-app-accent ，$ my-app-warn）;
$ mat-light-theme-foreground 函数。可以玩地图，只定义你想要的字段，并把其他字段作为默认值。 @function my-mat-light -theme-foreground（$ color）{
@return（
base：$ color，
divider：$ black-12-opacity，
divrs：$ 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），
s lider-off：rgba（$ color，0.26），
slider-off-active：rgba（$ color，0.38），
）;
};
//你可以在这里放任何颜色。我选择了mat-color（$ my-app-primary，700）
$ my-foreground：my-mat-light-theme-foreground（mat-color（$ my-app-primary，700）） ;
将前面创建的主题与前景地图合并，并初始化您的自定义主题。 >
注意：由于SCSS中的所有地图都是不可变的，因此 map-merge（）会返回新的地图实例，并且不会修改地图就地 - 因此我们有另一个变量 $ my-app-theme-custom 来保存结果主题。
$ my-app-theme-custom：map-merge（$ my-app-theme，（foreground：$ my-foreground））;
//包含您的自定义主题。
@include angular-material-theme（$ my-app-theme-custom）;
注意：我正在使用 Angular Material v2.0.0-beta.8
In the official theming documentation of Angular Material2 it states clearly the following:
In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:
- A primary palette: colors most widely used across all screens and components.
- An accent palette: colors used for the floating action button and interactive elements.
- A warn palette: colors used to convey error state.
- A foreground palette: colors for text and icons.
- A background palette: colors used for element backgrounds.
But in every example they modify only the first three:
@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);
So my question is: How can I change the foreground palette in order to change the color of the text for the primary or the secondary palette?
There are some websites (materialpalette.com, material.io) which show the color palette for easy visualization but still they don't say how to include or modify that palette in Angular Material2.
You can change the default theme color by creating your own foreground map and merge it into the created theme before initializing it. Here is how:
Build the theme object as usual.
@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);Build your custom foreground using a custom function returning foreground map as defined in
@angular/material/_theming.scss->$mat-light-theme-foregroundfunction.
You can play with the map and define only the fields you want and leave the others as default.@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));Merge the previously created theme with just the foreground map and initialize your custom theme.
Note: Since all maps in SCSS are immutable themap-merge()returns new map instance and DOES NOT modify the map in place - thus we have another variable$my-app-theme-customto hold the result theme.$my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground)); // Include your custom theme. @include angular-material-theme($my-app-theme-custom);
Note: I'm using Angular Material v2.0.0-beta.8
这篇关于如何更改Angular Material2中的主调色板的字体颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
