forced-color-adjust

示例(Examples)

选择退出强制颜色(Opting out of forced colors)

使用 forced-color-adjust-none 工具可以将某个元素排除在强制颜色模式所施加的颜色之外。在强制定色板会降低可用性的情况下，这非常有用。

🌐 Use the forced-color-adjust-none utility to opt an element out of the colors enforced by forced colors mode. This is useful in situations where enforcing a limited color palette will degrade usability.

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

Basic Tee

$35

Choose a color

WhiteGrayBlack

<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>

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

🌐 You can also use the forced colors variant to conditionally add styles when the user has enabled a forced color mode.

恢复强制颜色(Restoring forced colors)

使用 forced-color-adjust-auto 工具使一个元素遵循强制颜色模式下的颜色规则：

🌐 Use the forced-color-adjust-auto utility to make an element adhere to colors enforced by forced colors mode:

<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 工具，比如在较大屏幕尺寸上，这会很有用。

🌐 This can be useful if you want to undo the forced-color-adjust-none utility, for example on a larger screen size.

响应式设计(Responsive design)

在 forced-color-adjust 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。