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

我意识到这是根据材料设计规范。因此，期望覆盖的规定是错误的。但出于所有实际原因，要覆盖它们：

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

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

请记住，应在导入mdc-theme

后编写覆盖样式

覆盖主题文本颜色

1 个答案: