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;
}

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

<div>I'm Red</div>
<div class="div-blue">I'm Blue</div>

div {
  color: red;
  border: 1px solid currentColor;
}

.div-blue {
  color: blue;
}

So what can we do with currentColor?

SVG Fill

a {
 color: blue;
}

a > svg {
  fill: currentColor;
}

Theming

Can you think of other ways to use currentColor?