TechnophileIn CSS, the accent-color property allows you to set the custom color for several UI elements (or more specifically user-interface controls), such as scrollbars, input elements, and range sliders. See the demo here.
Table of contents
How to use it
You can either apply accent-color to the root of your HTML or a specific element.
/* general */
:root {
accent-color: red;
}
/* specific */
.custom {
accent-color: #12345A;
}
The accent-color currently applies to the following elements:
<input type="checkbox"><input type="radio"><input type="range"><progress>
Accessibility
By default, the user agent always ensures contrast accessibility under the hood. However, once you set a custom color, the browser doesn't change the color based on the theme or other factors.
If you want to use a custom color for inputs and sliders to match the design, you need to make sure that color contrast is high. To achieve this, we can the prefers-color-scheme query to colors depending on a user's theme.
The "user agent" is a fancy word for a browser
/* for light or default theme */
:root {
accent-color: #005451; /* dark green */
}
/* for dark theme */
@media (prefers-color-scheme: dark) {
:root {
accent-color: #00ece3; /* light green */
}
}
Demo
You can play with the demo below to see how the accent-color property works.
Browser Support
The accent-color is well-supported across browsers. As of June 15, 2022, support for Internet Explorer has officially ended.
Conclusion
It's always been a pain to style the form elements. While often being underused, the accent-color property is a great way of tweaking the form UI elements without having to write a lot of CSS or rely on JavaScript.
I hope this article has helped you get a better understanding of the accent-color property. If you have any questions or suggestions, feel free to leave a comment below. Thanks for reading!
