currentColor: The Most Useful CSS Color Keyword

currentColor resolves to the element's computed color value. It has been in CSS since 2010 and still does more for theming than half the design tokens people ship. Three places it earns its keep:

1. Inline SVG icons

<svg fill="currentColor" viewBox="0 0 24 24"> ... </svg>
.button { color: var(--text); }
.button:hover { color: var(--brand); }

One icon set, infinite themes. Ship icons with fill="currentColor" (or stroke="currentColor") and they inherit whatever color their parent has. No icon-color prop needed in your component library.

2. Borders that follow text

.tag { color: var(--brand); border: 1px solid currentColor; }

The border can never go out of sync with the text. Especially nice for outline buttons, badges, and focus chips.

3. Skeleton or empty-state illustrations

Author SVG illustrations in monochrome - all strokes and fills as currentColor. Then change one CSS variable per surface to retheme them: error states glow red, success states glow green, no asset duplication.

The hidden superpower: layering with color-mix()

.card { color: var(--brand); background: color-mix(in oklch, currentColor, white 92%); border: 1px solid color-mix(in oklch, currentColor, transparent 70%); }

Now the surface, border, and content text all derive from the parent's color. Change color once and the whole card retunes - perfect for status variants of the same component.

Two gotchas

• External SVG files rendered via <img> cannot inherit currentColor. Use inline SVG, an SVG sprite, or a CSS mask.
• SVG with hard-coded fills obviously won't follow. Run icons through your build pipeline to strip fill attributes and replace them with currentColor at import time.

Convert any multicolor SVG into a themable, currentColor-friendly version in our Recolor SVG tool.