DEV Community

Cover image for Write a single linešŸ˜® for tinting your brand color
Preethiāš”
Preethiāš”

Posted on • Updated on

Write a single linešŸ˜® for tinting your brand color

Hey There, Feel afresh to see you again and we may think sometimes as can I change default colors of form elementsšŸ¤”?? or can I at least change the color while focusing state or while selection statešŸ¤”??. The answer is YES.

Image description
Haha, which is possible by two ways, By customization of default style by lines & lines of code or By writing a single line of code(exactly a property or a pseudo class or a pseudo element). Hey you seems getting very curatedšŸ˜. So, wish to save your time and Let's get this ride on the roadšŸŽ‰.

Possible ways to reach on

Changing color on form elements by accent-coloršŸŒˆ

accent-color saving you from customization efforts by providing a way to bring your brand into elements.

Still, Can't get my point. It's completely fine and you will grasp the point by a unambiguous example.

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
Enter fullscreen mode Exit fullscreen mode
input{
  accent-color: auto;
}
input.custom {
  accent-color: deeppink;
}
Enter fullscreen mode Exit fullscreen mode

Recommended to practice on codepen

Currently, accent-color property supported on four elements only.

  • checkbox
  • radio
  • range
  • progress

The accent-color property also do their job with color-scheme effectively, allowing to tint both the light and dark elements.

If you not aware of color-scheme. Don't start to suffer and explore now.

For Instance,

<div color-scheme="light">
    <label>
      Default
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
    <label class="accented">
      Brand
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
</div>
<div color-scheme="dark">
    <label>
      Default
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
    <label class="accented">
      Brand
      <input type="radio" checked>
      <input type="radio">
      <input type="radio">
    </label>
</div>
Enter fullscreen mode Exit fullscreen mode
:root {
  --brand-color: deeppink;
}
.accented {
  accent-color: var(--brand-color);
}
[color-scheme="dark"] .accented {
  accent-color: hsl(328 100% 80%);
}
Enter fullscreen mode Exit fullscreen mode

See the magicāœØ below,

Image description

I can get your thoughtšŸ˜, "hey for practice this, I need a new file or a codepen. So, give me a sample codepen". Hm ok, I appended the codepen and start to play around on it.

Browser Support for accent-color

accent-color supported on modern web browsers.
Image description

Changing color while focusing by :focus-visiblešŸ§

Simply, means change the outline style of focus ring by using :focus-visible pseudo class.

For instance,

:focus-visible {
  outline-color: var(--brand-color);
}
Enter fullscreen mode Exit fullscreen mode

Image description
Recommended to play on the codepen and it's a good practice to make a way for familiar with new thingāœØ.

Changing color while selection by ::selectionšŸ”

The CSS pseudo-element ::selection changes the styling that is highlighted by the user (means allows you to style how selected text looks), such as when you highlight the text using a mouse or another pointing device.

Seems interesting right. So early I did a dedicated article on ::selection

It's really a subtle work for maintain the brand and I am sure which definitely impress your client. If you loved this subtle blog, Then give a endearing heartšŸ’ which really lot to me. I love the discussion with you.

Thanks for Reading!!
Preethi
- Make your CSS life easier

Top comments (0)