Use `currentColor` to Keep CSS DRY and Component Colors Flexible

What is currentColor

currentColor is a special CSS keyword that can be used to request the color value for use in other CSS properties.

Given the following CSS:

p {
  color: blue;
  border-color: currentColor;
}

Both the text color and the paragraph border will be blue.

If the p was a child of another element and didn't set its own color value, then border-color would pick up the value set in the ancestor.

Given the following, the border-color would now be red.

article {
  color: red;
}

article p {
  border-color: currentColor;
}

How currentColor Keeps CSS DRY

DRY is an acronym for a popular coding principle: Don't Repeat Yourself.

So instead of creating classes for every brand or theme color and repeating or overriding styles such as border-color and box-shadow, you can create color classes that simply set the color property.

Using Sass, we can quickly create 3 classes representing our 3 brand colors:

$theme-colors: (
  "primary": #D73846,
  "secondary": #5D5DDE,
  "tertiary": #19965B
);

@each $key, $value in $theme-colors {
  .ink-#{$key} {
    color: $value;
  }
}

Then for each component that intends to use the theme color across child elements, use the currentColor keyword for those properties.

Example (reduced to relevant properties using currentColor):

.card {
  border-color: 1px solid currentColor;

  &:hover {
    box-shadow: 0 0 1px 2px currentColor;

    &:before {
      // Use for background-color
      background-color: currentcolor;
      // Combine with opacity to use as a screen effect
      opacity: 0.08;
    }
  }

  svg {
    // Use currentColor for svg fill
    fill: currentColor;
  }
}

The following Codepen demonstrates the full .card component with each card using one of the .ink-[theme color] classes:

currentColor Offers Flexibility in Component Colors

Without the use of currentColor you would traditionally have repeated all the styles in the above block to handle the individual brand/theme values for all those properties. For a 3 color theme system, in this example the compiled, minified CSS for separate classes v. not using currentColor would add up to about 520b. Spread across a comprehensive design system, this can add up to kb off on the final production build meaning better overall performance.

In addition, currentColor means those components can intake a one-off color rule just by passing a new color value to .card instead of write yet another entire block to change each value.

#special-card {
  color: pink;
}

Dangers of currentColor

The drawback of using currentColor is the possibility of color combinations that do not appropriately pass contrast guidelines for accessibility. The advantage Sass has here is the ability to include functions within your component color-related rules to check for passing contrast. Considering the intent and expected use cases of a given element or component will help you decide whether to use currentColor over more defined color rules.

One way you may anticipate and overcome conflict is by preemptively declaring contrast-passing styles, particularly for typography, such as:

.card {
  // Perhaps support is a very light color, like pink
  &.ink-support {
    h3, a {
      color: scale-color(pink, $lightness: -23%);
    }
  }
}