ウェブページのダークモード化。画像が目立ちすぎるので何とかする。

さて、前回の記事：ウェブページをダークモード対応にする。で書いた方法で、このブログページをダークモード対応にしてみました。

主に文字色と背景色を調整したのですが、背景を暗くするとSNSのシェアアイコンなどが鮮やか過ぎて悪目立ちしてしまいます。暗めの画像を新たに用意するのは面倒くさい。簡単に対処する方法はないものか。

いろいろ試した結果、CSS の filterプロパティを利用するのが手っ取り早そう。

例えば filter : saturate() を使うと、対象要素の彩度を下げることができます。

オリジナル

filter:saturate(0.7)

filter:saturate(0.5)

filter:saturate(0.2)

filter:saturate(0)

ホワイトが目立つなぁ…というときは filter : brightness() でどうだ。対象要素の明度を調整できます。

オリジナル

filter: brightness(0.7)

filter: brightness(0.5)

filter: brightness(0.2)

filter: brightness(0)

saturate() と brightness() を組み合わせて、良さそうなバランスを探ります。

オリジナル

filter: saturate(0.8) brightness(0.8)

こんなもんかな。この辺りは好みですね。

freefielder.jp