如何为Fast Web Components设置明暗主题？解决复选框显示异常问题

你遇到的是Fast Design组件默认深色主题与白色背景不兼容的问题，以下两种具体方法可以解决：

方法一：切换官方浅色主题 #

Fast Design内置了浅色主题，通过fast-design-system-provider组件包裹需要适配的内容，即可全局切换为浅色模式，让文字颜色适配白色背景：

<!DOCTYPE html>
<html lang="en">

<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
</head>

<body>
  <fast-design-system-provider color-mode="light">
    <fieldset>
      <fast-checkbox checked>Apple</fast-checkbox>
      <fast-checkbox checked>Banana</fast-checkbox>
    </fieldset>
  </fast-design-system-provider>
</body>

</html>

方法二：局部自定义文字颜色 #

如果不需要切换全局主题，仅调整Checkbox的文字颜色，可以通过CSS直接覆盖样式：

<!DOCTYPE html>
<html lang="en">

<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
  <style>
    /* 直接设置Checkbox的文字颜色 */
    fast-checkbox {
      color: #1a1a1a;
    }

    /* 或者通过组件内部的label伪元素精准修改 */
    fast-checkbox::part(label) {
      color: #1a1a1a;
    }
  </style>
</head>

<body>
  <fieldset>
    <fast-checkbox checked>Apple</fast-checkbox>
    <fast-checkbox checked>Banana</fast-checkbox>
  </fieldset>
</body>

</html>

两种方法的区别：方法一会让所有Fast组件适配浅色模式，适合全局场景；方法二仅修改Checkbox的文字样式，适合局部调整需求。

内容的提问来源于stack exchange，提问作者manatlan