CSS ‘currentcolor’ Keyword
currentcolor keyword can be used to refer to the current value of the
currentcolor property allows you to use the current value of the
color property, without writing the actual color value.
This means, you can write the value once, but use it in multiple places. If you need to change the color, you only need to do it in one place (i.e. on the
color property). All the
currentcolor references will automatically use the new color.
Here's an example:
This is the equivalent of writing:
That probably looks like a pretty useless example, as the text and background are now the same color. You won't be able to see the text.
That's true. But there are plenty of places where
currentcolor can come in handy.
currentcolor for Box Shadows
Here's a working example where we set the color of the
box-shadow property to
currentcolor. Tweak the color at the top to see how it changes everything.
You might've noticed that the border also takes on the current color, even though we didn't specify
currentcolor for the border.
CSS borders have an initial value of "the value of the
color property". In other words, if you don't specify a color, it will use the same color that the
currentcolor resolves to.
Text Color on Backgrounds with
If you apply the
currentcolor keyword to the background color it will effectively hide the text. This is because they're both using the same color.
If you need to display text, one way to do it is to nest the text within its own element, then apply a separate color to that element.
You can even use the
opacity property along with white (or another light color) to make the text blend in slightly with the background.
You can still achieve this visual effect without using
currentcolor allows you to do it when the color is defined elsewhere (and maybe even unknown).
Using a Text Shadow
Another way of dealing with text and backgrounds that have the same color is by using a shadow to the text.
This is more of a design decision — there are many cases where shadowed text isn't appropriate. But if your design calls for it, here's how that can be done.
currentcolor is inherited, it is inherited as
currentcolor (not as the actual color value). So it's not the color that cascades down, it's
currentcolor. Therefore, any descendants will have their current color applied.
Here's an example of that: