如何在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页面中获得的.同样,MDC有这个前身 - 斜线 - 轻量级库 Material Design Lite(MDL),您可以轻松自定义主题颜色.它可以通过其自定义CSS主题构建器完成.^{[ 2 ]}

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

...目前,MDC Web支持使用Sass和CSS Custom Property进行主题化,并且一旦该服务可用,也会支持CDN支持计划.

事实证明,通过MDC的CDN URL修改主题颜色目前不是一种选择.

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

参考

1. 入门,Web的Material Components
2. 自定义CSS主题构建器,Material Design Lite
3. 主题指南,Web的材料组件

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。