currentColor is a value, that you have control over, that represents something else.

.card {
  color: red;
  border: 3px solid currentColor;
}

What do you think the color of that border is gonna be? Not a trick question, it’s red my friend. You don’t have to type red twice. You don’t have to worry those colors that you’ve so elegantly tied together are going to drift apart. The power of computer programming lives here.

The value currentColor resolves to is whatever the color value resolves to at the element being effected by the selector. The color property cascades, so it could be set three levels up from the current element, or not at all, or whatever. It’ll always be something.

p.s. it can be currentColor, currentcolor, CURRENTCOLOR, cUrrENtCoLOr or whatever. CSS is unbothered. Just spel it right.

Hard Times

Business just isn’t rolling in thick anymore for currentColor. Search a 10 year old codebase and you’ll find a few hits, but these days, custom properties are a far more popular choice. Are you turning your back on an old friend? Yes. Is new friend better? Also yes. Just saying.

.card {
  --mainColor: red;
 
  color: var(--mainColor);
  border: 3px solid var(--mainColor);
}

This does the same thing. It’s an extra line of code, but your fellow computer programmers will all agree that it’s much more clear and versatile.

Versatile?

Definitely. Custom properties can be just about anything. It’s almost weird how permissive the value of a custom property can be. But it’s certainly not just colors. Hopefully obviously: currentColor only references color. There is no currentPadding or currentEmotionalState or anything.

Bugs?

I figured I’d have a play for old times sake. While I was doing that, I noticed a few oddities.

body {
  color: orange;
  accent-color: currentColor; /* doesn't work 🤷‍♀️ */
}

That one just doesn’t work (across the three major browsers I tried). Why? No I’m asking you. lol.

Here’s another:

body {
  color: rebeccaPurple;
}
button {
  border: 1px solid currentColor;
}

That one isn’t a bug, I suppose, as the trouble is that user agent stylesheets tend to set the color of buttons themselves (e.g. color: buttontext;), so if you want it to work, you’ll have to set the color explicitly, or force inherit it.

button {
  color: inherit;
  border: 1px solid currentColor;
}

I also swore I found an issue with relative color syntax and currentColor, but now that I’m typing and fact checking I can’t find it again so I’ll just leave it at that.

I will say that using currentColor with the relative color syntax is awesome, like:

a {
  color: orange;
  text-decoration-color: oklch(from currentColor calc(l + 0.1) c h / 90%);
}

Which is basically what I was doing in Chilled Out Text Underlines.

But is it still cool though?

I feel like I’ve made the point that it’s not amazingly useful anymore, but I might also argue that it’s not a terrible idea when the intentionality matches up just right. For instance, say you’ve got icons where the fill should always match the text color. That’s a fine use case really.

nav {
  color: salmon;

  svg.icon {
    fill: currentColor;
  }
}

Another step further, we could pop a little shadow on those icons that is based on that color.

nav {
  color: salmon;

  svg.icon {
    fill: currentColor;
    filter: drop-shadow(
      0 1px 0 oklch(from currentcolor calc(l - 0.25) c h));
  }
}

Here’s a video of that and some other stuff working together. No custom properties here, all currentColor:

I have stuck in my memory a Simurai post from 2014 where he showed off the power of this as well.