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.

Overview [sr-only]

ClassDeclarations
accent-color:color / accent:coloraccent-color: color
accent:currentaccent-color: currentColor
accent:transparentaccent-color: transparent
accent:#hexaccent-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.

<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>
PREVIOUS
Animation Timing Function

Style syntax for setting speed curve of the animation.

NEXT
Appearance

Style syntax for controlling the native appearance of UI controls.

MIT License © Aoyue Design LLC.