配色方案

color-scheme 属性告诉浏览器一个元素支持哪些配色方案。然后浏览器会将其自身的部分绘制成匹配的颜色。这包括原生表单控件、滚动条以及 <iframe> 背后的画布。

Bootstrap集合 color-scheme 为你。重启设置 light dark 开 :root，以及每个 data-bs-theme 值固定一个方案。当某个元素必须使用不同于页面其余部分的方案时，使用这些工具。

光与暗

添加 .color-scheme-light 或 .color-scheme-dark 来设置某个元素的方案。浏览器随后会将该元素的原生部分绘制成匹配的样式。下面的示例在深色主题中强制使用浅色日期选择器。

<div class="p-3 bg-body fg-body" data-bs-theme="dark">
  <label class="form-label" for="scheme-dark-date">Dark picker (inherited)</label>
  <input class="form-control mb-3" id="scheme-dark-date" type="date">
  <label class="form-label" for="scheme-light-date">Light picker</label>
  <input class="form-control color-scheme-light" id="scheme-light-date" type="date">
</div>

将类添加到需要它的元素上。不要将其添加到包装器上。

遵循系统偏好

添加.color-scheme-auto以使一个元素同时支持两种方案。然后，当data-bs-theme强制使用某个主题时，浏览器也会遵循该元素的系统偏好。

          <iframe class="color-scheme-auto" src="..."></iframe>
        

上面的警告在这里也适用。我们的颜色遵循此元素内的系统偏好，而不再是你强制的主题。

第三方嵌入

嵌入文档遵循系统偏好。它无法看到 data-bs-theme 父页面的属性。因此，重启会设置 color-scheme: light dark 在每个 <iframe>，它保持嵌入透明。阅读 重启 完整的解释。

一些第三方嵌入没有暗黑模式。当系统处于暗黑模式时，浏览器会在这样的嵌入后面绘制白色背景。在那个 iframe 上添加 .color-scheme-light 可以让背景再次变为透明。

          <iframe class="color-scheme-light" src="..."></iframe>
        

添加更多值

我们提供三个值，因为它们涵盖了上述情况。CSS 还有更多值，例如 normal 和 only light。我们不提供它们，因为在 <iframe> 上使用它们是有风险的。Safari 和 Firefox 会将它们应用于嵌入的文档并移除其暗模式，而 light 以更清晰的名称完成相同的工作。

使用 工具 API 添加你需要的值。重新声明三个默认值，因为你的组替换了我们的值：

          // my-bootstrap.scss
@use "bootstrap/scss/bootstrap" with (
  $utilities: (
    "color-scheme": (
      property: color-scheme,
      class: color-scheme,
      values: (
        light: light,
        dark: dark,
        auto: light dark,
        normal: normal,
        only-light: only light
      )
    )
  )
);
        

这将 .color-scheme-normal 和 .color-scheme-only-light 添加到三个默认类别中。

CSS

Sass 工具 API

颜色方案工具在我们的工具 API 中声明于 scss/_utilities.scss。了解如何使用工具 API。

"color-scheme": (
  property: color-scheme,
  class: color-scheme,
  values: (
    light: light,
    dark: dark,
    auto: light dark,
  )
),