currentColor is a really useful, yet less-known CSS value that provides a more straightforward way to define color properties for elements in CSS. In this article, we talk about with currentColor is, three different scenarios in which it comes in handy and also compare it with the more popular inherit CSS value. I hope you enjoy it!

Wtf is currentColor?

In CSS, currentColor is a value that represents the computed value of the color property applied to an element. It allows you to dynamically inherit the text color of an element and use it as a value for other properties, providing a convenient and efficient way to maintain consistent color schemes in your CSS.

The currentColor keyword is particularly useful when defining border colors, outlines, backgrounds, and other properties where you want to match the element's text color without explicitly specifying the color value again.

Use Cases

Here are the top 3 practical use cases of currentColor in CSS:

1. Declare Border Color: With currentColor, you can easily set the border color property to match the color of the element, without having to rewrite the color.

    .button {
      color: lightsalmon;
      border: 2px solid currentColor; /* Border color will be the same as the text color */
      padding: 8px 16px;
    }
   

   

2. Set SVG Icon Fill Color: It is really useful for changing the color of an SVG to match the color property defined in the SVG or the parent container.

    svg {
      /* SVG icon's fill color will match the parent text color */
      fill: currentColor; 
    }
   

   

3. Creating reusable and dynamic styles: My favorite use of currentColor is when writing reusable styles whose color depends on the parent element. For example, if we change the color of the button in our first example, the button inherits the color of the parent element; the same with the border.

With this, you don't have to redeclare the color of the button each time.

Difference Between inherit and currentColor

Both currentColor and inherit deal with inheriting the color value from parent elements, but they have different behaviors and use cases:

Conclusion

In my opinion, currentColor is an underrated feature in CSS based on how useful it is. As a result of this article, I hope you've learned a few things about it, and you start using it more often.