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

Question

细节

我研究了 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 ]中的入门文档页面。同样，MDC 有这个前身斜线灯库Material Design Lite (MDL)，您可以轻松地自定义主题颜色。它可以通过其自定义 CSS 主题生成器来完成。^{[ 2 ]}

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

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

事实证明，目前无法通过 MDC 的 CDN URL 修改主题颜色。

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

参考

1. 入门，Web 的 Material 组件
2. 自定义 CSS 主题生成器，Material Design Lite
3. 主题指南，Web 的 Material Components

Answer 1

如果您使用来自 CDN 的 MDC Web 的 CSS，您可以使用CSS 自定义属性（变量）修改主题，如下所示：

/* my-style.css */

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

MDC 主题的 CSS 自定义属性的完整列表在这里。例如，您可以在此处修改主要/次要背景上的文本颜色：

/* 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 弃用。

Answer 2

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

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

那里还列出了二级和其他选项的类:)