ダークモード実装してみた。

2024年4月30日

これは個人的な備忘録。

ウェブサイトをダークモードに対応してみた。

数年前からの傾向で実装しようと思っていたのだが、既に制作済みのサイトのカラーの振り分け、指定し直しが面倒で二の足を踏んでいた。
だが。最近、夜に自分のサイトを見たとき、白背景がとても眩しく感じられたので、実装を決意。(老眼か!?)

参考にしたのは下記。

たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモ

「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。...

https://coliss.com/articles/build-websites/operation/css/one...

ユーザーインターフェースとしてモードを選択できるスイッチの実装も考えたが、選択してもらうのも手間では？と思い、OS設定を反映することに。

少ないコード、フィルタで簡単に実装できるなら楽じゃなーい!
と考えていたのだが、それでも諸々の調整が必要……
まずはサイト全体をフィルタープロパティを使ってサイト全体の階調を反転。そうすると画像の階調も反転してしまうので、画像を再び階調反転させる。


@media (prefers-color-scheme:dark) {
	html {
    filter:invert(1) hue-rotate(180deg);
	}

	html img,iframe {
    filter:invert(1) hue-rotate(180deg);
	}
}

サイト全体の階調を反転させているだけなのでモーダルウインドウの黒い背景が白になってしまう。
諸々のプラグインを使用しているので、外したい要素のクラス等を解析、指定し、想定通りのデザインになったと思っていたら、Chromeだけそうはいかなかった。

何故か背景画像が白いまま……Chrome自体がまだダークモードに対応しきれていない？とも言われているので、そういった理由が原因なのかもしれない。
試行錯誤のすえ、画像を指定したcssに!importantを付けて解消。
でもこれを指定したら、背景画像の固定background-attachment:fixed;が解除されてる……しかも、そこに!importantつけるとまた反映されない……|||orz