Comments on: Using currentColor in 2025

By: Dina

Dina — Mon, 28 Apr 2025 06:14:09 +0000

its joke

By: Dina

Dina — Mon, 28 Apr 2025 06:11:35 +0000

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

<!-- works with Tailwind -->
<label className="flex items-center gap-2 text-accet-color">
  <input type="range" className="w-40" />
  <span>Ползунок с accent-color</span>
</label>

By: Chris Coyier

Chris Coyier — Wed, 16 Apr 2025 21:40:38 +0000

In reply to Dave C. Solid tip there.

By: Dave C

Dave C — Tue, 15 Apr 2025 23:35:02 +0000

FYI. The border example can be shortened to just width and type. By default, border already inherits from text colour. Same with shadow and outline, if we leave the colour off the shorthand, it’ll default to currentColor.

By: Chris Coyier

Chris Coyier — Tue, 15 Apr 2025 22:27:46 +0000

In reply to Sarah S.

I believe I read from either Andy Bell or Heydon Pickering years ago about avoiding using CSS custom properties.

I'd be rather shocked if that were true.

My question is, is there any sort of performance overhead to choosing a CSS var instead of currentColor?

I'm going to say with fairly strong confidence: No. Unless you've got some extremely major DOM weight and CSS usage situation going on, you don't need to be concerning yourself with custom property (or currentColor) usage at all.

By: Sarah S

Sarah S — Tue, 15 Apr 2025 18:00:44 +0000

I believe I read from either Andy Bell or Heydon Pickering years ago about avoiding using CSS custom properties. I think the argument was using Sass variables instead to avoid having the browser do more calculations upfront to figure out the CSS var values…

My question is, is there any sort of performance overhead to choosing a CSS var instead of currentColor? It seems like there might be, where browsers are more optimized to know “currentColor = parent color,” vs browsers encountering a CSS var and not knowing what it could be.

By: Chris Coyier

Chris Coyier — Sun, 13 Apr 2025 17:38:31 +0000

In reply to Ana Tudor. 🙏

By: Ana Tudor

Ana Tudor — Sun, 13 Apr 2025 14:13:42 +0000

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.

Chrome? I have filed at least a couple of bugs myself (one of which I know for sure got fixed) and other issues I hit already had bugs filed. So it's possible the issue already got fixed.

By: Puspam Adak

Puspam Adak — Sat, 12 Apr 2025 18:27:54 +0000

In reply to Ben Reeves. You can actually keep your SVG code in a seperate file and just it inside your HTML code: The part after # is the ID of the SVG root tag in the external file: <svg id="root">......<svg> The only downside of this approach is that the browser can't determine the aspect ratio of the graphic automatically. But that won't cause any problem if you only use icons with a square viewbox.

By: Qing Charles

Qing Charles — Sat, 12 Apr 2025 04:41:09 +0000

You spelt currentColor wrong in your 2nd paragraph, which is ironic. Or is it? I can never remember the rules about irony 🙂