filter でロゴを単色化して、ライト・ダーク両テーマ用の画像を作らずに済ませる

どんな時に使う？

• LP の「導入実績」「スポンサー」欄のように、色も形もバラバラなロゴを落ち着いた単色でそろえたいとき。
• ダークモード対応で、同じロゴの白版・黒版を別ファイルで管理したくないとき。

コード

/* ライトテーマ: 黒に塗りつぶして薄くする → グレーのロゴになる */
.logos img {
  filter: brightness(0);
  opacity: 0.6;
}

/* ダークテーマ: 白っぽくする */
@media (prefers-color-scheme: dark) {
  .logos img {
    filter: invert(1) saturate(0) brightness(4); /* 投稿者のレシピ */
    /* 純白でよければ brightness(0) invert(1) のほうが確実 */
    opacity: 0.6;
  }
}

/* おまけ: ホバーで元の色に戻す */
.logos img {
  transition: filter 0.2s, opacity 0.2s;
}
.logos a:hover img {
  filter: none;
  opacity: 1;
}

brightness(0) は透明でない画素をすべて黒にする。そこに opacity をかけると背景色が透けて、テーマに合ったグレーになる。ダーク側は反転して彩度を落とし、明るさを上げて白に寄せている。テーマ切り替えをクラスで行うサイトなら、@media の代わりに [data-theme="dark"] .logos img のように書けばよい。

注意点

• 背景が透明な PNG・SVG・WebP のロゴが前提。白背景の JPG だと四角ごと黒（または白）になる。
• ロゴ内の色の差（2色ロゴの濃淡など）は消えて、シルエットだけになる。細部が潰れるロゴは別画像のほうがよい。
• 企業によってはロゴの改変（単色化）をブランドガイドラインで禁じている場合がある。掲載前に確認する。
• filter は全モダンブラウザ対応。

出典

• @dan__irh の投稿（ライトテーマ）
• 同スレッドの続き（ダークテーマ）