10代の頃からずっとそうなんですが、どうも目が「光」に弱いんですよね。
照明が暗めのとこでモニタの光、スマホの光を浴びてるとすぐに偏頭痛がやってくるため、
モニタの光、スマホの光ともに照明抑え気味で作業しています。
なので最近の「ダークモード」の流れは大歓迎、対応できるもの全てタークモードで表示させています。
というわけで、このサイトもダークモードを実装してみます。
この記事の目次
ダークモードを王道のやり方で実装してみる
巷でよく見るのがこのやり方。
ユーザーがOSでダークモードをONにしているかどうか判断して黒を白にする、みたいなことをcssでやってくれるみたいです。
CSSだけでWebページをダークモード対応。ついにChromeにも対応した prefers-color-scheme が超便利
早速この一文をcssに付け足してみました。
@media (prefers-color-scheme: dark) { body{ background-color:#000; color: #fff; } }
するとこう画面が変化しました。
なんか想像と違うぞ!?
文字は白くなっているけど背景は白いまま。
どうも<main>のエリア他、様々な場所に色がすでに背景色が指定されている様子。
ならば「ダークモード時はこの要素やクラスにはこの色」みたいな指定が必要。
すでに出来上がっているサイトだと大変ですねコレ…
王道をあきらめ邪道なやり方で実装
ダークモードだけに邪道…
という冗談は置いといて、こんな物を見つけました。
cssのfilterで全体の色相を反転させるという、なんというパワープレイ。
@media (prefers-color-scheme: dark) { body { filter: invert(1) hue-rotate(180deg); } }
この一文を足したらこうなりました。
見事に背景は黒、文字は白に反転できました。
ただ写真まで反転してしまうという難点も…
.dark-theme img{ filter: invert(1) hue-rotate(180deg); }
を付け加えてimg要素だけfilterの適用を除外しています。
他にも除外したい要素があれば付け加えていきます。
コレは簡単!
ちなみに対応ブラウザ
対応ブラウザはこちら。想像通りIEさんは対応してない様子。
まぁいいか…
https://caniuse.com/#feat=css-filters
最終的に…
- ダークモードON/OFF切り替えスイッチを実装
- 切替時に0.5秒のデュレーション
- 効果の微調整
を施しました。
デュレーション・スイッチ実装jsはこちらのサイトをめっちゃ参考にしました。
ちなみにボタンはこちらのサイトより
以上を付け加えてこんな感じになりました
良いですね!
ワードプレス中身いじるの面倒でボタンをサイドバー上部に入れちゃいましたが…
(これは余裕ある時にヘッダーに移植する)
ツメの甘いところは多々あるものの、思ったより簡単にできました。
みなさんもぜひ目に優しいサイトをお試し下さい。