아이콘 색상을 변경하는 CSS 트릭이 있을까요?

단일 카테고리 스타일 기능을 적용한 후, 내 카테고리 아이콘 색상이 카테고리 설정의 배경색을 따르게 되었는데, 이게 좀… 별로입니다.

스크린샷이 제/그들의 불만을 조금 더 잘 설명해 줄 수 있을 것 같습니다:

(거의) 이상한 표현을 해서 죄송합니다. 하지만 제 의도를 이해해 주셨으면 좋겠습니다.

저는 카테고리별로 다른 배경색을 설정하는 것을 단순히 거부합니다. 부분적으로는 카테고리 배너의 외관을 해치기 때문이지만, 대부분은 그 모든 다른 색상이 어떤 의미에서도 정보적이지 않으면서도 매우 불안한 느낌을 주기 때문입니다.

아주 다채로운 환경을 좋아하는 분들이 있다는 점은 완전히 이해합니다. 하지만 북쪽(노스)에 사는 우리 같은 사람들은 우리의 우울함을 극대화하는 미니멀하고 무채색적인 접근법을 좋아합니다 :rofl:

결국 저는 절박하게 도움이 필요합니다. 카테고리 배너에서는 제가 원하는 어떤 색상이든 사용하되, 아이콘은 그냥 검은색으로만 쓰고 싶습니다. 흰색 배경은 작동하지만, 그러면 모든 아이콘도 흰색이 되어 흰색 배경 위에서는 역시 기능성이 떨어지거든요…

카테고리 배너 테마 컴포넌트에는 배너의 아이콘 색상을 덮어쓰는 옵션이 있습니다(이렇게 하면 항상 배너 텍스트 색상과 일치하게 됩니다)… 따라서 이 기능을 활성화할 수 있습니다.

Screenshot 2023-11-16 at 10.44.31 AM

그리고 카테고리 아이콘 테마 컴포넌트에서 아이콘 색상을 설정하면 됩니다:

Screenshot 2023-11-16 at 10.45.37 AM

다만, 각 아이콘마다 색상을 설정하는 것이 많은 카테고리에서 번거로울 수 있으므로, 모든 아이콘을 하나의 색상으로 통일하고 싶다면 CSS를 사용하는 것이 좋습니다:

.badge-category__icon .d-icon {
  color: var(--primary-high);
}