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;
}
Like other CSS properties, currentColor
is affected by cascade and specificity.
<div>I'm Red</div>
<div class="div-blue">I'm Blue</div>
div {
color: red;
border: 1px solid currentColor;
}
.div-blue {
color: blue;
}
So what can we do with currentColor
?
SVG Fill
a {
color: blue;
}
a > svg {
fill: currentColor;
}
Theming
Can you think of other ways to use currentColor
?
Top comments (3)
Nice! I like using currentColor for reusing colors across a component. I only need to define a single color once:
BTW, recently found out you can use currentColor as a value of the fill and stroke attributes in svg:
👊
Nice. Nice. Yeah
currentColor
made consistent theming for certain components much easier. With CSS variables andcurrentColor
theming has been quite fun.What about applying on brand borders