Now that that we have custom properties in CSS, we pretty much have full power over our own variables in CSS. But even before those become helpful, we can use a keyword available since the CSS Color Module Level 3, currentColor, to keep colors consistent within elements.

currentColor acts like a variable for the current value of the color property on the element. And the  Cascading part of CSS is still effective, so if there’s no defined color property on an element, the cascade will determine the value of currentColor.

Usage

currentColor is useful when you want a certain color to be consistent in an element. For example, if you want an element to have a border color that’s the same as the element’s text color, using currentColor makes a lot of sense because then if you decide the main text color you can change the value at only one place.

An Example

Words are all well and good, but nothing beats an example! Let’s make use of currentColor at a few different places in a simple example. You’ll see how currentColor can also be really useful as the value for the fill properties of SVGs.

#css