currentColor

Ключевое слово currentColor можно использовать в качестве значения для CSS-свойства, принимающего цвет. Например, background-color. Браузер подставит вместо currentColor текущее значение свойства color.

Возьмём небольшой кусочек текста, зададим ему нужный цвет текста и добавим тень. В месте, где нужно задавать цвет тени, используем ключевое слово currentColor:

        
          
          .element {  color: darkblue;  box-shadow: 0 0 5px currentColor;}
          .element {
  color: darkblue;
  box-shadow: 0 0 5px currentColor;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тень рисуется тем же цветом, что и текст элемента.

Принцип работы очень похож на кастомные свойства в CSS: берём переменную, присваиваем значение и используем в нужных нам местах. Отличие только в том, что мы не создаём отдельную переменную, а используем готовое ключевое слово.

Если кастомные свойства вам не знакомы, то есть другая хорошая аналогия — ключевое слово inherit. Используем его в качестве значения нужного свойства и при изменении этого стиля у родителя стиль изменится сразу и в потомке. Недостаток такого подхода в том, что мы можем подставить это значение только в то свойство, которое нужно наследовать, а не в несколько.

Есть момент, о котором не нужно забывать. Если вы указали цвет текста и несколько свойств, где используется currentColor, и потом переопределили color, то ко всем свойствам применится именно последний указанный цвет.

        
          
          .element {  color: red;  border: 3px solid currentColor;  box-shadow: 0 0 5px currentColor;  color: black;}
          .element {
  color: red;
  border: 3px solid currentColor;
  box-shadow: 0 0 5px currentColor;
  color: black;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Всё будет черным цветом.

Тут работает всё тот же принцип каскада — правила, написанные ниже переопределяют написанное выше.

        
          
          <button>  <span>Удалить</span>  <svg>...</svg></button>
          <button>
  <span>Удалить</span>
  <svg>...</svg>
</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          button {  color: #0d47a1;}svg {  fill: currentColor;}
          button {
  color: #0d47a1;
}

svg {
  fill: currentColor;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать