Theming and currentColor

On one of my current projects I have been working on a color theming system. I chose to generate these themes using some utility classes that would assign background or color. Consider the following example:

.theme-primary.bg, .theme-primary .bg {
  background:rebeccapurple;
}

.theme-primary .color, .theme-primary .color {
  color:rebeccapurple;
}

The first rule will apply a background of purple to an element with the class of .theme-primary.bg and a child with the class of .bg and parent of .theme-primary. The second rule will work the same except with the color property instead of the background. These rules leave some flexibility. We can apply some theme styling whole cloth over an element while overriding the style or re-applying the style to any of the children. The cascade is beautiful—isn’t it?

The Challenge with Pseudo Elements # fragment anchor

One of my favorite features in CSS is pseudo elements. Whenever I need to create basic shapes (that are purely decorative) I usually reach for them as they are easy to update and won’t litter my HTML with unnecessary markup. They pose a problem with our current theming system though. How do I apply our classes to elements that I can’t directly apply classes to?

currentColor to the Rescue # fragment anchor

This turns out to be a thrifty use case for the currentColor value in CSS. Using this value we can apply the current theme color to pseudo elements. This pen illustrates the example:

Other Applications # fragment anchor

There are many other use cases for currentColor that can save time, and make CSS more maintainable. What do you use this value for?