accent-color

示例(Examples)

¥Examples

设置强调色(Setting the accent color)

¥Setting the accent color

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

¥Use utilities like accent-rose-500 and accent-lime-600 to change the accent color of an element:

<label>
<input type="checkbox" checked />
Browser default
</label>
<label>
<input class="accent-pink-500" type="checkbox" checked />
Customized
</label>

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

¥This is helpful for styling elements like checkboxes and radio groups by overriding the browser's default color.

改变透明度(Changing the opacity)

¥Changing the opacity

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

¥Use the color opacity modifier to control the opacity of an element's accent color:

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

设置强调色透明度的浏览器支持有限，目前仅适用于 Firefox。

¥Setting the accent color opacity has limited browser-support and only works in Firefox at this time.

使用自定义值(Using a custom value)

¥Using a custom value

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

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

对于 CSS 变量，还可以使用 accent-(<custom-property>) 语法：

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

这只是简写，用于 accent-[var(<custom-property>)] 它会自动为你添加 var() 函数。

悬停时应用(Applying on hover)

¥Applying on hover

在 accent-color 工具前面加上一个变体，例如 hover:*，以便仅在该状态下应用该工具：

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

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

响应式设计(Responsive design)

¥Responsive design

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

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

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

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --color-* 主题变量来自定义项目中的 color 工具：

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

现在 accent-regal-blue 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。