Accent color

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates, UsingACustomValue, } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors";

export const title = "accent-color"; export const description = "Utilities for controlling the accented color of a form control.";

[ accent-${name}, accent-color: var(--color-${name}); /* ${value} */, ]), ["accent-()", "accent-color: var();"], ["accent-[]", "accent-color: ;"], ]} />

Examples¶

Setting the accent color¶

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

{

Browser default

Customized

}

<!-- [!code classes:accent-pink-500] -->
<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¶

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

{

accent-purple-500/25

accent-purple-500/75

}

<!-- [!code word:/25] -->
<!-- [!code word:/75] -->
<input class="accent-purple-500/25" type="checkbox" checked />
<input class="accent-purple-500/75" type="checkbox" checked />

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

Using a custom value¶

Applying on hover¶

{

Agree to terms

}

<!-- [!code classes:hover:accent-pink-500] -->
<input class="accent-black hover:accent-pink-500" type="checkbox" />