如何在 Material Design Components for Web 中设置主色和辅助色？

Posted 2023-02-22

【中文标题】如何在 Material Design Components for Web 中设置主色和辅助色？

【英文标题】：How to set primary and secondary colors in Material Design Components for Web?

【发布时间】：2019-02-22 03:14:19

【问题描述】：

详情

我研究了用于 Web 的 Material Components (MDC) 并开始使用 CDN（托管的 CSS 和 javascript 库）：

https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

这得益于他们在 [1] 中的 getting-started-docs-page。同样，MDC 有这个 predecessor-slash-lighter-library Material Design Lite (MDL)，您可以轻松自定义主题颜色。它可以通过其自定义 CSS 主题生成器来完成。 ^[2]

但是，根据 MDC Web 的主题指南：^[3]

...目前，MDC Web 支持使用 Sass 和 CSS 自定义属性进行主题化，一旦该服务可用，还计划支持 CDN。

事实证明，通过 MDC 的 CDN URL 修改主题颜色目前不是一个选项。

所以再次回到我的问题，如何使用 CDN 在新的 MDC for Web 中设置主要颜色和次要颜色？

参考文献

Getting started, Material Components for the Web Custom CSS theme builder, Material Design Lite Theming guide, Material Components for the Web

【参考方案1】：

如果您使用来自 CDN 的 MDC Web 的 CSS，您可以使用 CSS custom properties (variables) 修改主题，如下所示：

/* my-style.css */

:root 
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;

MDC 主题的 CSS 自定义属性的完整列表是 here。例如，这里如何修改主要/次要背景上的文本颜色：

/* my-style.css */

:root 
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;

请注意，此 CSS 应在导入 MDC Web 的 CSS 文件之后出现，例如：

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="my-style.css">

您提到的MDL 主题定制器与MDC Web 无关。 MDL 是 MDC Web 的前身，已被 MDC Web 弃用。

【讨论】：

事实证明，这是唯一可行的解​​决方案。但是，它的 CSS 自定义属性 仅适用于背景颜色。文本颜色仍然需要进行骇人听闻的调整。

这是我提到的一个 hacky 调整的示例：<style>:root --mdc-theme-primary: #fcb8ab;</style><link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"><style>.mdc-button--raised color: var(--mdc-theme-on-primary, #ffffff) !important; </style><button class="mdc-button mdc-theme--primary mdc-button--raised">Hello World</button>

要更改主要颜色，您可以通过 CSS 自定义属性设置 --mdc-theme-on-primary: #fff; 变量，无需 hack。我会将其添加到答案中。

并非总是如此。这是一个jsfiddle sample code，它表明--mdc-theme-on-primary 不适用于mdc-button--raised 类。 --mdc-theme-primary 在替换主题颜色方面效果很好，但 --mdc-theme-on-primary 没有成功。

不好意思，我刚在本地查了一下，发现要在导入MDC Web的CDN代码后修改变量，我来修改答案。

【参考方案2】：

查看您链接到的页面，this 似乎解释说您应该编辑“mdc-theme--primary--bg”类以更改主要背景颜色。所以你可能会在你的页面css或<style>标签中做这样的事情：

.mdc-theme--primary-bg 
  background-color: red

那里还列出了次要和其他选项的类 :)

【讨论】：

我怀疑是否有办法直接从 CDN 链接编辑主题。

是的，我也怀疑是否有办法通过 CDN 链接进行编辑。我还尝试通过.mdc-theme--primary--bg... 操作 CSS，但并没有完全替换默认主题的颜色。

您是否将“mdc-there--primary--bg”添加为这样的类：<div class="mdc-card__media mdc-theme--primary-bg">？

我个人没有使用过 Material Design CDN，我只是阅读了文档。