首页 文章

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

提问于
浏览
6

在官方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.commaterial.io)显示了易于可视化的调色板,但他们仍然没有说明如何在Angular Material2中包含或修改该调色板 .

3 回答

  • 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);
    
    • 使用自定义函数构建自定义前景,返回前景图,如 @angular/material/_theming.scss - > $mat-light-theme-foreground 函数中所定义 .
      您可以使用 Map 并仅定义所需的字段,并将其他字段保留为默认值 .
    @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));
    
    • 仅使用前景贴图合并以前创建的主题并初始化自定义主题 .
      Note: 由于SCSS中的所有 Map 都是不可变的,因此 map-merge() 返回新的 Map 实例并且不会修改 Map - 因此我们有另一个变量 $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);
    

    Note: 我正在使用 Angular Material v2.0.0-beta.8

  • 2

    该指南位于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 palette我们可以根据键获取任何值,例如

    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 拥有所有颜色, Map 和所有功能,如 mat-color

  • 9

    这是代码:

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

    您可以在以下位置找到 Map :\ node_modules \ @angular \ material \ core \ theming \ _palette.scss

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

    $foreground: map-get($theme, foreground);
    
    .foreground-color {
      color: mat-color($foreground, secondary-text);
    }
    

相关问题