forced-color-adjust

用于选择加入或退出强制颜色的工具类。

快速参考

类	属性
forced-color-adjust-auto	forced-color-adjust: auto;
forced-color-adjust-none	forced-color-adjust: none;

示例

退出强制颜色

使用 forced-color-adjust-none 工具类，让元素退出强制颜色模式所强制应用的颜色。这在强制使用有限调色板会降低可用性的场景中很有用。

Basic Tee

$35

Choose a color

White Gray Black

<!-- [!code classes:forced-color-adjust-none] -->
<form>
  <img src="/img/shirt.jpg" />
  <div>
    <h3>Basic Tee</h3>
    <h3>$35</h3>
    <fieldset>
      <legend class="sr-only">Choose a color</legend>
      <div class="forced-color-adjust-none ...">
        <label>
          <input class="sr-only" type="radio" name="color-choice" value="White" />
          <span class="sr-only">White</span>
          <span class="size-6 rounded-full border border-black/10 bg-white"></span>
        </label>
        <!-- ... -->
      </div>
    </fieldset>
  </div>
</form>

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

恢复强制颜色

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

<!-- [!code classes:lg:forced-color-adjust-auto] -->
<form>
  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
    <legend>Choose a color:</legend>
    <select class="hidden lg:block">
      <option value="White">White</option>
      <option value="Gray">Gray</option>
      <option value="Black">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 工具类（例如在更大的屏幕尺寸上），这会很有用。

响应式设计

使用 md: 等断点变体为 forced-color-adjust 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

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

在 变体文档 中了解如何使用变体。