MDC-Web：复选框的主题颜色

Question

如何使用基本 CSS/HTML/JavaScript 在 MDC-Web 中的复选框元素上设置自定义颜色？

示例：如何将此复选框背景设置为浅蓝色？

<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <style>
        :root {
            --mdc-theme-primary: blue;
            --mdc-theme-accent: lightblue;
        }
        .mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::before,
        .mdc-ripple-surface.mdc-ripple-upgraded.mdc-button--primary::after {
            background-color: rgba(66, 66, 66, 0.08);
        }        
    </style>
</head>

<body>
<div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox"
           id="my-checkbox"
           class="mdc-checkbox__native-control"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark__path"
              fill="none"
              stroke="white"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
  </div>

  <label for="my-checkbox">My Checkbox Label</label>
</div>
</body>

Answer 1

:root {
    --mdc-theme-primary: blue;
    --mdc-theme-secondary: lightblue;
}

Material Web 组件现在使用 css 变量 mdc-theme-secondary 而不是 --mdc-theme-accent 作为二次色。

这已在版本 0.18.0

中更改

MDC-Web：复选框的主题颜色

MDC-Web: Theme Color for Checkbox

material-components

material-components-web