DEV Community

CSS: currentColor Value

Karl Castillo on May 03, 2020

The CSS property currentColor is an interesting property where the value of currentColor is your element's current font colour. This value can be u...
Read full post
Collapse
 
joostkiens profile image
Joost Kiens •

Nice! I like using currentColor for reusing colors across a component. I only need to define a single color once:

<button>
  Clicketyclikckclack
  <svg><!-- maybe an arrow icon? --></svg>
</button>

button {
   color: hotpink;
   border: 2px solid currentColor;
}

button > svg { stroke: currentColor; }

button:hover,
button:focus { color: rebeccapurple; }

BTW, recently found out you can use currentColor as a value of the fill and stroke attributes in svg:

<path stroke='currentColor' fill='currentColor' />

👊

Collapse
 
koralarts profile image
Karl Castillo •

Nice. Nice. Yeah currentColor made consistent theming for certain components much easier. With CSS variables and currentColor theming has been quite fun.

Collapse
 
rtpharry profile image
Matthew Harris •

What about applying on brand borders