Appearance

Accent Color

Style syntax for setting the accent color of user interface elements or controls.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`accent-color:color` `/` `accent:color`	`accent-color: color`
`accent:current`	`accent-color: currentColor`
`accent:transparent`	`accent-color: transparent`
`accent:#hex`	`accent-color: #hex`
`accent:rgb(rgb)`	`accent-color: rgb(rgb)`
`accent:hsl(hsl)`	`accent-color: hsl(hsl)`

Basic usage

Set the accent color

Use the accent-color:color to set a custom accent color of user interface elements or controls.

DefaultCustomized

<label>
    <input type="checkbox" />
    <span>default color</span>
</label>
<label>
    <input type="checkbox" class="accent-color:red-46">
    <span>Customized</span>
</label>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="accent-color:red-46:hover accent-color:red-46@sm accent-color:red-46@dark accent-color:red-46@print">…</div>

Accent Color

Overview [sr-only]

Basic usage

Set the accent color

Conditionally apply