是否可以设置 Angular Material 主题的文本颜色？

Question

使用Material的公共函数而不覆盖CSS是否可以设置文本颜色？

define-palette

函数接受一个名为

text

的参数，这设置了调色板的

text

属性。但如果我打电话给

mat.get-theme-color($AngularMaterialTest-theme, foreground, text)

我会得到

rgba(0, 0, 0, 0.87)

。

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$AngularMaterialTest-primary: mat.define-palette(mat.$indigo-palette, A200, A100, A400, A700); //A700 = #303f9f
$AngularMaterialTest-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400, A700);

// The warn palette is optional (defaults to red).
$AngularMaterialTest-warn: mat.define-palette(mat.$red-palette, A200, A100, A400, A700);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$AngularMaterialTest-theme: mat.define-light-theme((
  color: (
    primary: $AngularMaterialTest-primary,
    accent: $AngularMaterialTest-accent,
    warn: $AngularMaterialTest-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($AngularMaterialTest-theme);

@debug($AngularMaterialTest-primary); // Has text: #304ffe
@debug(mat.get-theme-color($AngularMaterialTest-theme, foreground, text)); // rgba(0, 0, 0, 0.87)

Answer 1

根据源代码，它的设计除了黑色或白色文本之外没有任何内容。

解决“文本”按钮的文本颜色。您可以看到它只查看当您调用

$is-dark

或

mat.define-light-theme

时设置的

mat.define-dark-theme

。它不检查主题中的任何颜色值。

@function get-color-tokens($theme) {
  $is-dark: inspection.get-theme-type($theme) == dark;
  $on-surface: if($is-dark, #fff, #000);

  @return (
    label-text-color: $on-surface,
    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
  );
}

https://github.com/angular/components/blob/b43c73c836fc46fccb8510d7a4da04b612929610/src/material/core/tokens/m2/mdc/_text-button.scss#L46

搜索

if($is-dark, #fff, #000)

显示有多少位置颜色被硬编码为黑色或白色

https://github.com/search?q=repo%3Aangular%2Fcomponents+if%28%24is-dark%2C+%23fff%2C+%23000%29&type=code&p=1