loading...

CSS: currentColor Value

koralarts profile image Karl Castillo ・1 min read

CSS 101 (7 Part Series)

1) CSS: Using Styles 2) CSS: Basic Selectors 3 ... 5 3) CSS: Box Model 4) CSS: Cascade and Specificity 5) CSS: Unit of Measurements 6) CSS: Color Values 7) CSS: currentColor Value

The CSS property currentColor is an interesting property where the value of currentColor is your element's current font colour. This value can be used as a named colour.

div {
  color: red;
  border: 1px solid currentColor;
}

Like other CSS properties, currentColor is affected by cascade and specificity.

<div>I'm Red</div>
<div class="div-blue">I'm Blue</div>
div {
  color: red;
  border: 1px solid currentColor;
}

.div-blue {
  color: blue;
}

So what can we do with currentColor?


SVG Fill

a {
 color: blue;
}

a > svg {
  fill: currentColor;
}

Theming


Can you think of other ways to use currentColor?

Discussion

markdown guide
 

Nice! I like using currentColor for reusing colors across a component. I only need to define a single color once:

<button>
  Clicketyclikckclack
  <svg><!-- maybe an arrow icon? --></svg>
</button>
button {
   color: hotpink;
   border: 2px solid currentColor;
}

button > svg { stroke: currentColor; }

button:hover,
button:focus { color: rebeccapurple; }

BTW, recently found out you can use currentColor as a value of the fill and stroke attributes in svg:

<path stroke='currentColor' fill='currentColor' />

πŸ‘Š

 

Nice. Nice. Yeah currentColor made consistent theming for certain components much easier. With CSS variables and currentColor theming has been quite fun.

 

What about applying on brand borders