E ae pessoas! Quando criamos o CSS de uma página, praticidade é sempre algo bem vindo. E no quesito paleta de cores, há algo muito bem vindo: o valor "currentColor".
Para que serve? Simplesmente ele procura o elemento acima dele mais próximo na hierarquia que tenha uma propriedade “color” definida e puxa esse valor para aplicá-lo na propriedade atual com o "currentColor" definido. O "currentColor" é utilizável em qualquer propriedade que pode ter uma cor aplicada, como border, stroke, fill, background-color, gradiente de background-image, box-shadow, text-shadow, entre outros. Veja um exemplo:
<div id="a"> <p>Sou um parágrafo curto</p> <hr/> <p>Sou um parágrafo curto</p> </div>
Temos uma estrutura simples HTML com um conteúdo dentro de uma <div> com id “a” divido por uma divisória <hr/>. No CSS, vamos definir uma cor para <div id="a">:
#a{color: #F00;}
Agora o texto ficou vermelho, mas queremos que a divisória também fique vermelha. Então vamos definir um estilo para o <hr/>:
#a{color: #F00;}
hr{border: 1px solid currentColor;}
Aqui defini o valor "currentColor" ao invés de uma cor, assim, ele vai pesquisar os elementos acima dele na hierarquia, e no caso seria o <div id="a"> que é o mais próximo a ter a propriedade "color" definida. Assim, ele herdará o valor de "color", aplicando-o na borda do <hr/>, ficando assim:
Mas se eu quiser mudar para azul? Mude o valor da cor em #a e veja a mágica acontecer:
#a{color: #00F;}
hr{border: 1px solid currentColor;}
Simples! Isso abre um monte de possibilidades, tudo vai depender de como você estrutura seu site.
O currentColor é esperto
Se você definir um novo "color" para um elemento que já tinha "color" definido antes em outra linha, e algum elemento esteja usando o "currentColor" baseado neste elemento, ele irá adotar o último "color". Exemplo:
#a{color: #00F;}
hr{border: 1px solid currentColor;}
#a{color: #CCC;}
O <hr/> irá adotar a cor #CCC.
Mesmo se tiver mais de um "color" na mesma linha, e nesta linha (ou em outra) exista uma propriedade usando “currentColor” baseado neste elemento, o valor adotado será o do último “color”. Exemplo:
#a{color: #00F; border-bottom: 1px solid currentColor; color: #CCC;}
A borda inferior definida no CSS acima adotará a cor #CCC.
Testando o currentColor
Abaixo segue um exemplo melhor que preparei. Para brincar com ele, clique aqui para abri-lo em uma aba diferente no seu navegador.
Até mais!