簡易ダーク・モード

曇り、でも、時々太陽が見えた。

気温は低くなっているね。

Webサイトを見る時、背景が白ベースだと、眩しくて見づらい、なんて思うこともある。

例えば、Yahoo! Japanで検索した時。

そんな時に、FirefoxやChrome系を使っている人は、StylusやStylishのようなアドオン(拡張機能)を使えば、CSSを書いて、ダーク・モードに変更できる。

こういう感じでダーク・モードにする。

一番手っ取り早いのが、有名どころであれば、誰かがそういうのを作ってくれているので、それを導入すること。

でも、そういうのがなければ、一から自分で作らないといけない。

色んな要素(タグやdiv)があるので、全部を網羅するのはかなり大変。

とりあえず、ということであれば、たった数行でそれを実現するCSSがある。

それがこれ。

html {
background-color: #ddd !important;
color: #000 !important;
filter: hue-rotate(180deg) invert(100%) !important;
}
body {
background-color: #ddd !important;
color: #000 !important;
}
iframe, img, video, canvas {
filter: hue-rotate(180deg) invert(100%) !important;
}

実際には、数行ではないけれど。(笑)

とにかく、たったのこれだけで、どんなページでも、簡易ダーク・モードに変更出来るのである。

通常の状態。

簡易ダーク・モード。

これを知った時、なんでこんだけでそうなるの？と思って、見てみた。

なるほど、「filter」の中の「hue-rotate」がポイント。

これに「180deg」を設定することにより、「色を反転」させている。

だから、要素ごとに設定しなくても、おおざっぱだけれど、ダーク・モードに変更されるのである。

上記CSSの「background-color」と「color」を変更する時、色の反転を考慮した値を設定すること。
真っ黒「#000」にしたければ、白の「#fff」を指定する。

もし、テキスト入力エリア(input)をダーク・モードにしたくなければ、

input {
background-color: #222 !important;
color: #ddd !important;
}

を追加し、値を変更すればいい。

もう一つポイント。

「iframe, img, video, canvas」でも、色を反転している。
こうしておかないと、フィルム写真のネガ・フィルムのような状態になってしまう。
反転したものを更に反転し、元に戻しているのである。

一つ問題がある。

こういうタグの画像は元に戻るけれど、「background」で指定しているような画像は対象にならないので、反転になったまま。
上記の写真がまさしくいい事例。(笑)

簡易ダーク・モードなので仕方ないよね。

あとは、気になるところの要素の色の変更を追加していくだけ。

CSS3になって、色んなことが出来るようになったねぇ。