Question

我正在尝试更改文本颜色而没有成功。在组件scss文件中，我输入以下内容：

@import '~@angular/material/theming';
@include mat-core();

$auth-primary: mat-palette($mat-indigo, 50, 100);
$auth-accent: mat-palette($mat-indigo, 50, 100);
$auth-warn: mat-palette($mat-pink, 400, 500);
$auth-theme: mat-dark-theme($auth-primary, $auth-accent, $auth-warn);

@include mat-form-field-theme($auth-theme); // Form-Field theme
@include mat-input-theme($auth-theme);      // Input Theme

此代码段成功更改了标签，下划线，错误文本和填充的颜色。但是输入的文本/图标颜色仍然是默认的灰色。

有没有一种方法可以使用物料Sass属性/混合或功能将输入文本，图标和按钮的颜色从灰色更改为白色？

Answer 1

添加此代码。

$mat-indigo: (
    50 : #f9e4e5,
    100 : #f0bcbf,
    200 : #e79094,
    300 : #dd6369,
    400 : #d54149,
    500 : #ce2029,
    600 : #c91c24,
    700 : #c2181f,
    800 : #bc1319,
    900 : #b00b0f,
    A100 : #ffdddd,
    A200 : #ffaaab,
    A400 : #ff7779,
    A700 : #ff5d5f,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #ffffff,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);
$mat-indigo: (
  50 : #e7e7e7,
  100 : #c2c2c2,
  200 : #999999,
  300 : #707070,
  400 : #525252,
  500 : #333333,
  600 : #2e2e2e,
  700 : #272727,
  800 : #202020,
  900 : #141414,
  A100 : #ef6e6e,
  A200 : #ea4040,
  A400 : #f60000,
  A700 : #dd0000,
  contrast: (
      50 : #000000,
      100 : #000000,
      200 : #000000,
      300 : #ffffff,
      400 : #ffffff,
      500 : #ffffff,
      600 : #ffffff,
      700 : #ffffff,
      800 : #ffffff,
      900 : #ffffff,
      A100 : #000000,
      A200 : #ffffff,
      A400 : #ffffff,
      A700 : #ffffff,
  )
);

然后它已经可以工作了。问题是您没有设置$mat-indigo等。

Answer 2

$candy-app-theme: mat-light-theme($auth-primary, $auth-accent, $auth-warn);

因此即使在黑暗的环境中也不会出现将输入变黑的问题，您只需要更改主题的显示模式即可：

黑暗模式：

$candy-app-themee: mat-light-theme($auth-primary, $auth-accent, $auth-warn);

灯光模式：

mat-dark-theme

只需在主题本身之间切换

mat-light-theme

和

{{1}}

角材料更换垫形场主题

2 个答案: