Theming with current color

This article explores using the currentColor property to theme elements, to avoid writing extra CSS to override color.

In cases where you have an element that needs to have a few different colors the default approach might be to make many different classes

.select-option-spice-mild {
  background-color: var(--color-green-5);
}

.select-option-spice-medium {
  background-color: var(--color-yellow-5);
}

/* etc. */

Instead, we can create a single class, I am using "themed" to distinguish the class as making use of currentColor

.select-option-spice-themed {
  background-color: currentColor;
}

/* Another class we are about to make use of */
.color-alias-spice-mild {
  color: var(--color-alias-spice-mild);
}

We can then use our "themed" class with a utility class includes a color property

<li class="select-option-spice-themed color-alias-spice-mild">Mild</li>

This method only works well when combined with utility color classes, otherwise, we are just creating the same amount of classes plus a "themed" class.

SVG's and currentColor

The currentColor property is handy within SVG's too. By making icons "themable" without having to reach into the SVG using class or ID selectors. This approach works well when there is only one element within an SVG to color, otherwise, a class or ID selectors are a better tool.

Say we want to color a chili icon with different colors for each spice level

One approach would be to create a new SVG for each spice level but creating many SVG's might also create an "out of sync" issue in the future where one icon is updated but the others are not.

We can add currentColor as a value to the fill attribute

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <!-- Use currentColor for the main fill of the icon -->
    <path fill="currentColor" d="..."/>
    <!-- The fill on the steam of the chilli remains a static green -->
    <g>
        <path fill="#77B255;" d="..."/>
        <path fill="#77B255;" d="..."/>
    </g>
</svg>

This is not limited to the fill attribute, it can also be used with the stroke attribute or in CSS with the fill or stroke property.

What I would do to color the icons is to create color aliases classes to represent the spice levels then include them in the HTML

<li class="color-alias-spice-mild">
  <svg>
    <!-- All the svg stuff you would expect in here -->
  </svg>
  <span>Mild</span>
</li>
<li class="color-alias-spice-hot">
  <svg>
    <!-- All the svg stuff you would expect in here -->
  </svg>
  <span>Hot</span>
</li>

There are many ways to include an SVG but for this example we are including it inline.

Our icons will then appear colored with the colors in our color classes

• Mild
• Hot

Changing the text color

What if we don't want to color the text as well? We can prevent the color from being inherited by setting a color on the text. That way the color will be inherited in the SVG but not the span.

<li class="color-alias-spice-mild">
  <svg>
    <!-- All the svg stuff you would expect in here -->
  </svg>
  <span class="color-alias-body-text">Mild</span>
</li>

• Mild
• Hot

Related Resources

This color naming system was talked about in a previous post of mine.