DEV Community

Discussion on: CSS: currentColor Value

View post
Collapse
 
joostkiens profile image
Joost Kiens •

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' />

👊

Collapse
 
koralarts profile image
Karl Castillo •

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