Use `currentColor` to Keep CSS DRY and Component Colors Flexible
Tags: css, webdev
Published: 2020-02-16 05:02:09

## 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:

```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`.

```css
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:

```scss
$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`):

```scss
.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:

{% codepen https://codepen.io/5t3ph/pen/MWwyjXO %}

## `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.

```css
#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](https://codepen.io/5t3ph/pen/bGGragY) within your component color-related rules to check for [passing contrast](https://webaim.org/resources/contrastchecker/). 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:

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