Improvements for Element Styling

The accent-color property

One of the most common things frameworks and design systems seek to change is native form field styles. Prior to the arrival of the accent-color property, even changing a form element’s color was impossible. With accent-color, we can now influence the checked appearance of radio buttons and checkboxes, and the filled-in state for range inputs and the progress element.

The color-scheme property

If we’re looking to adapt our interface to a user’s light or dark mode preference using a custom toggle and/or the prefers-color-scheme query, we should also add the color-scheme property. This provides an opt-in to adapting browser UI elements such as scrollbars, form controls, and CSS system colors. Whereas accent-color allows us to pick custom colors for a few elements, color-scheme requests that the browser adapt even more—such as by asking text inputs and textareas to display as light or dark-themed.

It’s recommended that this be applied to the :root element and that the values be listed in the order of a site’s defaults. In other words, if we default to light but support dark, list light dark. If we default to dark but support light, list dark light . If we only support light or dark , just list that single value: