PC、モバイルの各OSでは画面全体を黒で統一する「ダークモード（ダークテーマ）」を設定できるようになりました。ウェブサイトでも同様にダークモードにすることが可能です。このサイトでも対応しているので、OSをダークモードにして確認してみてください。
ダークモードのメリットと注意点
そもそもダークモードが必要なのかという点ですが、面白い記事がありました。
「ダークモード」は、本当に“目に優しい”のか？ 5つの観点から科学的に検証した結果｜WIRED.jp
スマートフォンやPCの「ダークモード」表示を好む人たちは、このモードが目の疲れを減らし、バッテリー寿命を延ばし、睡眠を改善してくれるのだという。だが実際のところをどうなのか？ 5つの観点から専門家に聞いた。
https://wired.jp/2019/10/05/dark-mode-chrome-android-ios-science/
こちらの記事では下記の５つが検証されています。
- 目の疲れ
- 読みやすさ
- バッテリー寿命
- 集中できる
- 就寝前によい
いずれもメリットばかりとは言えないようです。一般的なウェブサイトでは実装する必要はあまりないのかもしれません。またコンテンツや商材の雰囲気にダークモードが合わないケースも多いと思います。
ただ、単純に閲覧者の好みで色を変えられるという点や、夜スマホに光って欲しくないなど便利なシーンもありそうです。SNSや掲示板のように日々操作するようなサイトであれば、OSと同じ配色にすることで操作のしやすさを感じられると思います。
ダークモードに対応する際の注意点
- 上に書いた通り、無理にダークモードを実装する必要はないと思います。
- このサイトで試してみましたが、この規模でも思いのほか工数がかかります。単純に色を反転するだけではなく、再度新たな色合いを設計する必要があります。またアイコンなどの画像も別途必要になる場合があります。
- レスポンシブ対応では少なくとも２パターン必要ですが、ダークモードによりさらにパターンが増えます。CSSが複雑になりメンテナンス性が落ちます。
サイトでの実装方法
JavaScriptにてON/OFFボタンをつける形も考えられますが、CSSの中でOSの指定を参照することが可能です。
@media ( prefers-color-scheme: dark ) {
（ダークモードのスタイル）
}
@media ( prefers-color-scheme: light ) {
（ライトモードのスタイル）
}
通常のCSSがライトモードに当たるため、その末尾にダークモードのスタイルを記述し、上書きするような形になると思います。
今回このサイトで実装した際に気づいた点をまとめてみます。
事前にできる工夫や留意点
- アイコン画像は「白黒※」「SVG」「Webフォント」にて用意する。CSSだけで色を操作できるため、ダークモード用の画像を作成しなくてすみます。※黒いアイコンであれば、CSS「filter: invert(100%);」にて白に反転させることができます。
- CSSの記述方法で色は必ず変数を使用する。CSSにも変数がありますが、IEでは使用できないためSCSSでの変数が安全です。
具体的な方法としては、「$color-text」という文字の色（黒）に対して、新しく「$color-dark-text」（＝白）を用意します。既存のCSSをコピーしてダークモード用のスタイルとする際に全置換できます。 - 全体のトーンを黒に寄せる。黒背景「#000000」に真っ白な文字「#ffffff」などコントラストが強すぎるとやはり読みづらくなります。文字を少しグレーに寄せるなどし全体のトーンを合わせます。
- 複数のスタイルを指定できるプロパティはそのままダークモードにコピーしない。「background」や「border」のようにスタイルをまとめて記述するプロパティは、色の指定だけを上書きするため「background-color」「border-color」にて記述した方が安全です。色以外の指定を上書きすると意図しない表示になることがあります。（例えば線の太さが上書きされているものをさらに上書きしてしまうなど）
- CSSによるグラデーションやフレームワークにあるスタイルが見落としやすい。ジェネレータを使った記述など変数を使用していない色があるかもしれません。
これまでサイトの「色」については、全体のバランスを見て一つに決定することが重要だったため、このように変更できるというスタンスでは制作してきませんでした。ただダークモードに限らずメンテナンス性という意味でも柔軟に操作できることにはメリットがあるので、どのサイトでも意識しておく方が良さそうです。