CSSトリックでアイコンの色を変更するには？

[Jagster (Jakke Lehtonen)]

単一カテゴリスタイルの「あれ」で、カテゴリアイコンの色がカテゴリ設定の背景色に従うようになり、それは…あまり良くありません。

スクリーンショットで私の（彼らの）苦痛がもう少しよく説明できるかもしれません。

奇妙な言葉遣い（ほぼ）ごめんなさいですが、私の言いたいことは理解していただけると思います。

カテゴリごとに異なる背景色を設定することは、私は断固として拒否します。カテゴリバナーの外観を損なうという理由も一部ありますが、それ以上に、これらのすべて異なる色は意味のある情報を提供せず、非常に落ち着きのない印象を与えるからです。

カラフルな環境を愛する人もいることは完全に理解できますが、ここ北の国では、私たちのうつ病を最大限に高めるミニマリストで無色のアプローチを愛しています🤣

基本的に、黒いアイコンのみを使用し、それ以外はカテゴリバナーに好きな色を使用するのを助けてくれる人を必死に探しています。白い背景は機能しますが、その場合、すべてのアイコンが白になり、白い背景ではそれもあまり機能的ではありません…

[awesomerobot (Kris)]

カテゴリバナーテーマコンポーネントには、バナーのアイコンの色をオーバーライドするオプションがあります（これにより、常にバナーテキストの色と一致します）…したがって、これを有効にすることができます。

そして、カテゴリアイコンテーマコンポーネントでアイコンの色を設定します。

ただし、多くのカテゴリで各アイコンの色を設定するのは不快になる可能性があるため、すべてを1色にしたい場合は、代わりにCSSを使用できます。

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