accent-color

快速参考

示例

设置强调色

使用 accent-rose-500 和 accent-lime-600 等工具类来改变元素的强调色：

<label>
  <input type="checkbox" checked />
  浏览器默认
</label>
<label>
  <input class="accent-pink-500" type="checkbox" checked />
  自定义
</label>

这有助于通过覆盖浏览器默认颜色来样式化复选框和单选按钮组等元素。

改变不透明度

使用颜色不透明度修饰符来控制元素强调色的不透明度：

<input class="accent-purple-500/25" type="checkbox" checked />
<input class="accent-purple-500/75" type="checkbox" checked />

设置强调色不透明度的浏览器支持有限，目前仅在 Firefox 中有效。

使用自定义值

使用 accent-[<值>] 语法根据完全自定义的值设置强调色：

<input class="accent-[#50d71e] ..." type="checkbox" />

对于 CSS 变量，您也可以使用 accent-(<自定义属性>) 语法：

<input class="accent-(--my-accent-color) ..." type="checkbox" />

这只是 accent-[var(<自定义属性>)] 的一个简写，它会自动为您添加 var() 函数。

应用于悬停状态

在 accent-color 工具类前加上 hover:* 等变体，使其仅在该状态下应用：

<input class="accent-black hover:accent-pink-500" type="checkbox" />

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

响应式设计

在 accent-color 工具类前加上 md: 等断点变体，使其仅在中等屏幕尺寸及以上应用：

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

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

自定义您的主题

使用 --color-* 主题变量来定制您项目中的颜色工具类：

@theme {
  --color-regal-blue: #243c5a; 
}

现在，accent-regal-blue 工具类可以在您的标记中使用：

<input class="accent-regal-blue" type="checkbox" />

在 主题文档 中了解更多关于自定义主题的信息。