DEV Community

Karl Castillo
Karl Castillo

Posted on

12 2

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?

Oldest comments (3)

Collapse
 
rtpharry profile image
Matthew Harris β€’

What about applying on brand borders

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.

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!