DEV Community

loading...

CSS: currentColor Value

koralarts profile image Karl Castillo ・1 min read

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?

Discussion (3)

pic
Editor guide
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 Author

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