覆盖主题文本颜色

Question

我的问题

我设置了我的自定义主题，它工作正常。

但是我在橙色（重音）按钮上得到了黑色文本颜色，但我想要白色。

我的解决方案

在 @material/theme/_variables.scss 中我们有这样的代码：

$mdc-theme-primary: #3f51b5 !default; /* Indigo 500 */
$mdc-theme-accent: #ff4081 !default; /* Pink A200 */
$mdc-theme-background: #fff !default; /* White */

/* Which set of text colors to use for each main theme color (light or dark) */
$mdc-theme-primary-tone: mdc-theme-light-or-dark($mdc-theme-primary);
$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent);
$mdc-theme-background-tone: mdc-theme-light-or-dark($mdc-theme-background);

从上面的代码中，我们可以看到前三个参数有 !default ，这意味着使用它作为默认值，如果它们已经被声明不要覆盖。

因此，我们可以指定自定义颜色。

但是对于像 $mdc-theme-accent-tone 这样的属性，我们不得不使用计算值。如果我将上面的代码（MDC 的源代码）更改为

$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent) !default;

和我的风格

$mdc-theme-accent-tone : "light"

它工作正常。但显然我不能更改源代码。如何实现这一目标。

Answer 1

我意识到这是根据 material 设计规范。因此，期望一项条款被覆盖是错误的。但出于所有实际原因，要覆盖它们，请执行以下操作：

@import "@material/theme/mdc-theme";

:root {
    --mdc-theme-text-primary-on-accent: white;
}

记住override style应该在import mdc-theme之后写

覆盖主题文本颜色

Override theme text color

material-components