One of my favorite tricks recently has become to use currentColor as a flavor to almost anything. Quite unknown for a long time, I'm pretty sure that Lea Verou was the first person to ever use and expose it to the world.

While CSS variables are fucking awesome, it's 1. not always possible to use them yet (oh sweet IE 11) and 2. not always necessary.

Let's go for an example. Remember how everybody loves icon fonts because they automatically get the color of the font? Turns out you can do the same thing with SVG with a greater control.

Well suppose your code looks like this:

<nav class="menu">
    <a class="item">
        <svg><path d="..."/></svg>
        JavaScript
    </a>
    <a class="item">
        <svg><path d="..."/></svg>
        Python
    </a>
    <a class="item">
        <svg><path d="..."/></svg>
        Sass
    </a>
</nav>

You want the SVG icon in front of the text to change with the text's color. What do you do?

<svg><path d="..."/></svg>

Becomes

<svg><path fill="currentColor" d="..."/></svg>

And that's it, your SVG has the color of the text no matter what. Here's a live example, don't forget to hover the buttons!

Have you noticed how the Python logo doesn't change color completely on hover? You don't have to put the currentColor to every path in the SVG. Much more freedom than with fonts!

It's a simple trick but I really used it a lot recently. What about you, what patterns can you think of with currentColor?