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 中的 getting-started-docs-page ].同样，MDC 有这个 predecessor-slash-lighter-library Material Design Lite (MDL)，您可以轻松自定义主题颜色。它可以通过其自定义 CSS 主题构建器来完成。 ^{[ 2 ]}

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

... At the moment, MDC Web supports theming with Sass and with CSS Custom Property, with plans for CDN support as well, once that service is available.

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

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

引用资料

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

Answer 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。