Color & Backgrounds
accent-color
Setting the accent color of user interface elements or controls.
Overview
| Class | Declarations |
|---|---|
accent-color:current | accent-color: currentColor;
|
accent-color:transparent | accent-color: transparent;
|
accent-color:<color> | accent-color: <color>;
|
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-50"> <span>Customized</span></label>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="accent-color:red-50:hover accent-color:red-50@sm accent-color:red-50@dark accent-color:red-50@print">…</div>