如何更改 Angular Material2 中主调色板的字体颜色?

Posted

技术标签:

【中文标题】如何更改 Angular Material2 中主调色板的字体颜色?【英文标题】:How to change font color of primary palette in Angular Material2? 【发布时间】:2017-09-12 07:02:43 【问题描述】:

在官方theming documentation of Angular Material2 中明确说明如下:

在 Angular Material 中,主题是通过组合多个调色板来创建的。具体来说,一个主题包括:

主调色板:在所有屏幕和组件中使用最广泛的颜色。 强调色板:用于浮动操作按钮和交互元素的颜色。 警告调色板:用于传达错误状态的颜色。 前景调色板:文本和图标的颜色。 背景调色板:用于元素背景的颜色。

但在每个示例中,他们只修改前三个:

@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 中包含或修改该调色板。

【问题讨论】:

【参考方案1】:

要更改前景文本颜色,首先照常创建主题,然后覆盖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)

我很惊讶不可能以更简单的方式做到这一点 - 期待最终会改变。祝你好运。

【讨论】:

【参考方案2】:

您可以通过创建自己的前景图来更改默认主题颜色,并在初始化之前将其合并到创建的主题中。方法如下:

    像往常一样构建主题对象。

     @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() 返回新地图实例并且不修改地图就位 - 因此我们有另一个变量 $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 添加到地图中,因为 cmets 中的几个人报告说它是在以后的版本中添加到前景地图中的。

【讨论】:

以防万一有人收到错误 Argument $color` of opacity($color) must be a color` - 上面的 my-mat-light-theme-foreground($color) 函数缺少 slider-min 的属性 角度 5,材质 5 @LewisCampbell 谢谢!我确实收到了 Argument $color 错误,我使用的是 Angular 6。 他们已将slider-min 添加到前景地图中。 Angular 材质主题方法是整个 Angular 中最复杂且记录最少的部分。我很抱歉这一切浪费了多少时间【参考方案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调色板我们可以得到任何基于key的值,比如

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.scssfile 不见了。你可以对它进行全局搜索:'$mat-dark-theme-background: ('

_theming.scss 拥有所有颜色、地图和所有功能,例如mat-color

【讨论】:

在获得前景调色板和一些基于它们的键的值后,我如何在我的主题上设置前景色?【参考方案4】:

代码如下:

// 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

检索“辅助文本”的示例:

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

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

【讨论】:

感谢您的回答,但您指定的路径我在我的项目中找不到它,您使用什么版本的 angular-material2?您能否解释一下您的示例中的$themeforegroundsecondary-text?谢谢!

以上是关于如何更改 Angular Material2 中主调色板的字体颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何在angular2(material2)中设置小吃店的持续时间

如何使 div 中的 flexbox 具有 2 列与 mat-chips/angular material2 的 ngFor?

Angular2/material 2:当以编程方式更改值时,md-input-container 标签不会重置浮点数

如何对 material2 图标进行单元测试

Angular - 材质:进度条自定义颜色?

如何安全地更改 Django 模型中主键字段的值?