如何在 Material Design Components for Web 中设置主要颜色和次要颜色？

Question

详情

我研究了 Material Web 组件 (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]. Similarly, MDC has this predecessor-slash-lighter-library Material Design Lite (MDL) which you could easily customize the theme colors. It can be done through its custom CSS theme builder. ^[2]

中的 getting-started-docs-page

但是，根据 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 中设置主要颜色和次要颜色？

参考资料

Answer 1

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

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

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

Answer 2

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

/* my-style.css */

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

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

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

如何在 Material Design Components for Web 中设置主要颜色和次要颜色？

How to set primary and secondary colors in Material Design Components for Web?

html

css

material-design

cdn

material-components-web

详情

参考资料