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:
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; }
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; }
Creating reusable and dynamic styles: My favorite use of
currentColoris 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:
| currentColor | inherit |
| used to apply the same color value as the element's text color to other CSS properties within the same element. | used to explicitly inherit the color value from the parent element. |
allows you to dynamically inherit the color property's value and use it for other properties, such as borders, outlines, backgrounds or SVG fill colors. | Unlike currentColor, which represents the computed value of the color property of the element itself, inherit specifically takes the exact color value from its parent element's color property. |
The currentColor keyword represents the computed value of the color property applied to the element itself. So, if you change the text color with the color property, any properties with currentColor will automatically update to match the new text color. | If the parent element does not have a defined color property, the browser will continue to traverse up the DOM tree to find the nearest ancestor with a defined color property. |
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.