Quick summary ↬

The new CSS accent-color Property makes it quick and easy to roll out our brand colors to certain shape inputs using user agent styles. In this article we look at what it does and how to use it together color-scheme for simple, accessible blocks and radio buttons – and imagine how we can use them in the future.

I do not know about you, but I love it when new CSS properties arrive that simplify our daily life as developers and enable us to remove a whole bunch of redundant code. aspect-ratio is such a feature (which recently the need for the padding hack). accent-color maybe just the following.

Checkboxes with accent-color. (Big preview)

Style Shape Input

Let’s take squares. In each browser it is styled differently by the user agent style sheet (responsible for the default styles of the browser).

Screenshots of standard boxes in Chrome and Safari.  The Safaris are smaller and lighter in color.

Default box styles in Chrome (top) and Safari (bottom). (Big preview)

Historically, there was no real way to style this input. Many web developers rather use a familiar hack, which visually (but accessiblely) hides the input, and then forms a pseudo-element on the label. (This also applies to radio buttons.)

See the pen [Old skool custom checkbox styling](https://codepen.io/smashingmag/pen/QWgrrKp) by Michelle Barker.

See the pen Old school custom box style by Michelle Barker.

It is actually less comprehensive than previous solutions. Modern CSS has a detailed tutorial on how to implement custom boxes and radio buttons using this technique.

This technique works across the browser and will still be necessary if the blocks need to be fully customized (with animations, and so on). But in many cases, we do not need a stylish style – we simply need to be able to apply a brand color and continue. Wouldn’t it be great to get rid of all the clumsy CSS? Tap in accent-color!

Easy to use

For the simplest use we can use the accent-color property on the :root element and make it applicable everywhere on our website:

:root {
  accent-color: rgba(250, 15, 117);
}

This applies to the selected color for (at the time of writing) boxes, radio buttons, range and progress elements.

Shape with blocks, radio buttons, progress bar and series input, with a lime accent color applied.

(Big preview)

Accessibility

A fun feature is that the browser will automatically determine the best color for the check mark to ensure adequate color contrast, using its own internal algorithms. This means that no extra code is needed to ensure that our blocks are as accessible as they can be.

In the next demo, we apply two different accent colors. If you see it in Chrome, you should see that the check mark on the left is white, while the right one is black. Browsers use different algorithms for this, so you can experience different results in Chrome versus Firefox.

See the pen [accent-color – showing two different colours](https://codepen.io/smashingmag/pen/jOwxxVm) by Michelle Barker.

See the pen accent color shows two different colors by Michelle Barker.
More to jump! Read more below ↓

Custom properties

If we want to apply the same color to other UI elements, we can use a custom property. We can set our color as a custom attribute on the root element, and then apply it to (for example) headings or other shape elements:

:root {
  --brand: rgba(250, 15, 117);
  accent-color: var(--brand);
}

See the pen [accent-color with custom property](https://codepen.io/smashingmag/pen/YzQLLpm) by Michelle Barker.

See the pen accent color with custom property by Michelle Barker.

We can even create some fun effects. In the following demonstration, we assign each box group a custom attribute that matches the element’s index (--i) use the style feature in the HTML. Then we use it in our CSS to calculate the hue value in an HSL color function to determine the accent color. Rainbow boxes!

See the pen [accent-color w/custom properties](https://codepen.io/smashingmag/pen/yLXjjgP) by Michelle Barker.

See the pen accent color with custom features by Michelle Barker.

Other form elements

Unfortunately accent-color is not applied to other elements we can expect, such as selected deductions. We may want to apply our chosen color to already stylable shape elements, such as buttons and text input. The custom feature is useful here, as we can apply it to the border of our text input and the background of buttons, for example:

See the pen [accent-color with custom property](https://codepen.io/smashingmag/pen/VwWxxPJ) by Michelle Barker.

See the pen accent color with custom property by Michelle Barker.

The Web.dev documentation on accent-color contains this handy snippet by Adam Argyle for the style of other elements that are not exclusive to shapes, including list markers, text selection highlights, and the focus ring:

html { 
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button, 
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Color schemes

To further adapt our form elements, the color-scheme property can help us to design it according to the user’s preference for light or dark mode. At present, we can use dark mode styles according to the user’s system preferences with the prefers-color-scheme media query:

/* 
    If the user's preference is set to 'dark', this renders white text on a black background
*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }
}

If we leave it that way, our blocks still have a light background in their unmarked state.

Checkboxes on a dark background

Despite the light background of the page, the blocks have a light background by default. (Big preview)

We can use color-scheme to ensure that our squares prefer a light or dark style. Placing it on the root element in our CSS ensures that it applies to the entire page:

:root {
  color-scheme: light dark;
}

This gives expression to the color schemes in order of preference. Alternatively, we can implement it using a meta tag in our HTML:

<meta name="color-scheme" content="light dark">

This is actually preferable, as it is read by the browser immediately before the CSS file is analyzed and executed – so we can help avoid a flash of unstyled content (FOUC).

In our demo of the rainbow block you may see that the browser also adjusts the color of some of the finches when we change the color scheme while maintaining the contrast. Pretty cool!

color-scheme influences the user agent styles. If we use it without providing other background color or text color styles for the page, the default colors of the page will be reversed if the user chooses a dark color scheme – so the default background color is black and the text color will be white. In practice, it is very likely that we want to ignore it with CSS. We can use color-scheme along the prefers-color-scheme media query. In this demo I use prefers-color-scheme to set the text color only if a dark scheme is preferred.

See the pen [accent-color with color-scheme](https://codepen.io/smashingmag/pen/NWgMMpd) by Michelle Barker.

See the pen accent color with color scheme by Michelle Barker.

color-scheme can also be set to individual elements, which is useful if there are a few areas in our design that we want to maintain a particular color scheme, regardless of whether the light or dark mode is turned on. In this demo we have a shape with a dark background, even if the general color scheme is light. We can specify a dark color scheme to ensure that our squares have a dark color at all times:

.dark-form {
  color-scheme: dark;
}

See the pen [accent-color – showing two different colours](https://codepen.io/smashingmag/pen/JjJvvWw) by Michelle Barker.

See the pen accent color shows two different colors by Michelle Barker.

Restrictions

As mentioned, there are several elements that are not currently affected accent-color, for which this feature would be useful. Another consideration is that we are currently limited to styling the marked state of the box or radio button – except for use color-scheme, which has an effect on the box boundary but does not allow full customization. It would be great to be able to style the border color and thickness for import in an uncontrolled state, or implement even more personal style, such as changing the overall shape, but we are not quite there yet. At the very least, it would be better to allow the box border to inherit the body text color.

It will also be useful to use accent-color to other elements outside forms, such as video controls. A developer currently needs a significant amount of work for a developer to create custom controls, to re-create the accessibility of native people. This excellent article by Stephanie Stimac gives an exposition of the work presented by Open UI Standardize UI elements to make it easier for developers to style them.

Alternatives

An alternative way to style a box or turn button is to hide the default styling -webkit-appearance: none and replace it with a background image. (See this demo.) Modern browsers support it fairly well, but it has its limitations compared to the first method of using a pseudo-element (described at the beginning of this article), since we can not manipulate the background image directly with CSS ( eg change color or opacity), or change the image.

The CSS Paint API – part of the Houdini set of CSS APIs – offers more customization options, allowing us to pass on custom features to manipulate a background image. Sign out this beautiful demo (and accompanying worksheet) by Matteo. Support is currently limited to Chromium browsers.

Accessibility

We need to ensure that we provide accessible focus styles when hiding the standard appearance of shape controls. An advantage of accent-color is that it does not hide the browser ‘s default browser and retains accessibility.

Browser support

accent-color is currently supported in the latest versions of Chrome and Edge. It can be turned on in Firefox with the layout.css.accent-color.enabled flag, and will be supported in the next version. Unfortunately, there is currently no Safari support available. This is not to say you can not start using it immediately – unsupported browsers accent-color The browser’s standard browser is simple, so it works great as a progressive enhancement.

Closure

We have mostly talked about blocks and radio buttons here, as this is one of the most common form elements that require customization. But accent-color has the potential to style many of our form elements quickly and easily, especially where extensive customizations are not required, and the browser can choose the best options for accessibility.

Further reading

Some resources on accent-color, color-schemeand import of style forms:

Smashing Editorial(vf, yk, hy)



Source link