Lzh on GitHub

forced-color-adjust

用于选择性开启或关闭强制颜色模式的工具。

快速参考

类名样式
ClassStyles
forced-color-adjust-autoforced-color-adjust: auto;
forced-color-adjust-noneforced-color-adjust: none;

示例

退出强制颜色模式

使用 forced-color-adjust-none 工具类使元素不遵守强制颜色模式所强制的颜色。这在强制使用有限的调色板会降低可用性时很有用。

尝试在您的开发者工具中模拟 `forced-colors: active` 以查看变化

Basic Tee

$35

Choose a color 
<form>
  <img src="/img/shirt.jpg" />
  <div>
    <h3>基础T恤</h3>
    <h3>$35</h3>
    <fieldset>
      <legend class="sr-only">选择颜色</legend>
      <div class="forced-color-adjust-none ...">
        <label>
          <input class="sr-only" type="radio" name="color-choice" value="White" />
          <span class="sr-only">白色</span>
          <span class="size-6 rounded-full border border-black/10 bg-white"></span>
        </label>
        </div>
    </fieldset>
  </div>
</form>

您还可以使用 强制颜色变体 来在用户启用强制颜色模式时有条件地添加样式。

恢复强制颜色模式

使用 forced-color-adjust-auto 工具类使元素遵守强制颜色模式所强制的颜色：

<form>
  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
    <legend>选择颜色:</legend>
    <select class="hidden lg:block">
      <option value="White">白色</option>
      <option value="Gray">灰色</option>
      <option value="Black">黑色</option>
    </select>
    <div class="lg:hidden">
      <label>
        <input class="sr-only" type="radio" name="color-choice" value="White" />
        </label>
      </div>
  </fieldset>
</form>

如果您想撤销 forced-color-adjust-none 工具类，例如在更大的屏幕尺寸上，这会很有用。

响应式设计

在 forced-color-adjust 工具类前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具类：

<div class="forced-color-adjust-none md:forced-color-adjust-auto ...">
  <!-- ... -->
</div>

在 变体文档 中了解更多关于使用变体的信息。