Syntax
accent-color
Setting the accent color of user interface elements or controls.
Overview
| Class | Declarations |
|---|---|
accent:<color> | accent-color: <color>;
|
accent:current | accent-color: currentColor;
|
accent:transparent | accent-color: transparent;
|
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-46:hover accent-color:red-46@sm accent-color:red-46@dark accent-color:red-46@print">…</div>