DEV Community

Karl Castillo
Karl Castillo

Posted on

CSS: currentColor Value

The CSS property currentColor is an interesting property where the value of currentColor is your element's current font colour. This value can be used as a named colour.

div {
  color: red;
  border: 1px solid currentColor;
}
Enter fullscreen mode Exit fullscreen mode

Like other CSS properties, currentColor is affected by cascade and specificity.

<div>I'm Red</div>
<div class="div-blue">I'm Blue</div>
Enter fullscreen mode Exit fullscreen mode
div {
  color: red;
  border: 1px solid currentColor;
}

.div-blue {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

So what can we do with currentColor?


SVG Fill

a {
 color: blue;
}

a > svg {
  fill: currentColor;
}
Enter fullscreen mode Exit fullscreen mode

Theming


Can you think of other ways to use currentColor?

Top comments (3)

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