如何在 Angular Material2 中更改主调色板的字体颜色?
How to change font color of primary palette in Angular Material2?
官方theming documentation of Angular Material2中明确说明如下:
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.
但在每个示例中,他们只修改前三个:
@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 中包含或修改该调色板。
代码如下:
// 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\material\core\theming\
_palette.scss
检索示例 'secondary-text':
$foreground: map-get($theme, foreground);
.foreground-color {
color: mat-color($foreground, secondary-text);
}
该指南可在位于 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
文件不见了。不过,您可以对其进行全局搜索:'$mat-dark-theme-background: ('
_theming.scss
拥有所有颜色、地图和所有功能,就像 mat-color
您可以通过创建自己的前景图来更改默认主题颜色,并在初始化之前将其合并到创建的主题中。方法如下:
照常构建主题对象。
@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);
使用返回前景图的自定义函数构建自定义前景,如 @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-min: 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));
将之前创建的主题与前景图合并并初始化您的自定义主题。
注意: 由于 SCSS 中的所有地图都是不可变的 map-merge()
returns 新地图实例并且不会就地修改地图 - 因此我们有另一个变量 $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);
注意:我正在使用Angular Material v2.0.0-beta.8
编辑 2020 年 10 月: - 我已将 属性 slider-min
添加到地图中,因为评论中的一些人报告说它已添加到以后构建中的前景图。
要更改前景文本颜色,请先按常规创建主题,然后覆盖 theme.color.foreground.text
:
// define theme as you do currently, e.g.
$theme: mat.define-light-theme(...)
/ grab color.foreground map from theme
$color: map-get($map: $theme, $key: color);
$foreground: map-get($map: $color, $key: foreground);
// override text of foreground map
$my-text-color: #3B4956;
$themed-foreground: map-merge($foreground, (text: $my-text-color));
// override foreground of $color map
$themed-color: map-merge($color, (foreground: $themed-foreground));
// override color of theme map
$theme: map-merge($theme, (color: $themed-color));
照常从 $theme 生成 css,即 @include mat.all-component-themes($theme)
- 确保只生成一次。实现此目的的一种方法:
_theme.scss
// contains above theme - ok to include many places
theming.scss
// generates css - only include once!
@import './theme';
...
@include mat.all-component-themes($theme)
我很惊讶不可能以更简单的方式做到这一点 - 希望最终会改变。祝你好运。
官方theming documentation of Angular Material2中明确说明如下:
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.
但在每个示例中,他们只修改前三个:
@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 中包含或修改该调色板。
代码如下:
// 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\material\core\theming\ _palette.scss
检索示例 'secondary-text':
$foreground: map-get($theme, foreground);
.foreground-color {
color: mat-color($foreground, secondary-text);
}
该指南可在位于 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
文件不见了。不过,您可以对其进行全局搜索:'$mat-dark-theme-background: ('
_theming.scss
拥有所有颜色、地图和所有功能,就像 mat-color
您可以通过创建自己的前景图来更改默认主题颜色,并在初始化之前将其合并到创建的主题中。方法如下:
照常构建主题对象。
@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);
使用返回前景图的自定义函数构建自定义前景,如
@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-min: 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));
将之前创建的主题与前景图合并并初始化您的自定义主题。
注意: 由于 SCSS 中的所有地图都是不可变的map-merge()
returns 新地图实例并且不会就地修改地图 - 因此我们有另一个变量$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);
注意:我正在使用Angular Material v2.0.0-beta.8
编辑 2020 年 10 月: - 我已将 属性 slider-min
添加到地图中,因为评论中的一些人报告说它已添加到以后构建中的前景图。
要更改前景文本颜色,请先按常规创建主题,然后覆盖 theme.color.foreground.text
:
// define theme as you do currently, e.g.
$theme: mat.define-light-theme(...)
/ grab color.foreground map from theme
$color: map-get($map: $theme, $key: color);
$foreground: map-get($map: $color, $key: foreground);
// override text of foreground map
$my-text-color: #3B4956;
$themed-foreground: map-merge($foreground, (text: $my-text-color));
// override foreground of $color map
$themed-color: map-merge($color, (foreground: $themed-foreground));
// override color of theme map
$theme: map-merge($theme, (color: $themed-color));
照常从 $theme 生成 css,即 @include mat.all-component-themes($theme)
- 确保只生成一次。实现此目的的一种方法:
_theme.scss
// contains above theme - ok to include many places
theming.scss
// generates css - only include once!
@import './theme';
...
@include mat.all-component-themes($theme)
我很惊讶不可能以更简单的方式做到这一点 - 希望最终会改变。祝你好运。