如何使用 Fast Web Components 设置浅色/深色主题?

问题描述 投票:0回答:1

我正在使用https://www.fast.design/docs/components/checkbox 在一个简单的 HTML 页面中,但默认主题似乎是深色的......所以“白色背景”上的“白色文本”:它不可读。

我怎样才能改变这种奇怪的行为? (设计系统,但如何?文档并不简单)。

<!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>
  <fieldset>
    <fast-checkbox checked>Apple</fast-checkbox>
    <fast-checkbox checked>Banana</fast-checkbox>
  </fieldset>
</body>

</html>

javascript html performance web-component
1个回答
1
投票

哇那些文档太糟糕了😱你最好的选择可能就是简单地使用CSS。

fast-checkbox::part(label) {
color: red; /* Change the color to whatever you desire */
    }

<!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>
    fast-checkbox::part(label) {
      color: red;
    }
  </style>
</head>

<body>

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

</html>

© www.soinside.com 2019 - 2024. All rights reserved.