意外と簡単！自分のサイトをダークモード対応してみた【技術編】

2019-09-24T04:49:33+09:00

スプランプ（splamp.info）というサイトの管理人をしているウラルです。

来ましたよ、ダークモードの時代が。2019年はダークモード元年です。

ダークモードの時代が来た

何を言っているかお分かりでしょうか。
実は、2019年はWindows・iOS・Androidという三大OSがダークモード対応をするという、大きな時代の節目なのです。

OSの更新日とダークモード設定方法

2019年5月22日
Windows 10 May 2019 Update配信開始。「個人用設定 > 色」から「既定のアプリモード」を「黒」にする。

2019年9月4日
Android10配信開始。「設定 > ディスプレイ」から「ダークテーマ」をオンにする。

2019年9月20日
iOS13配信開始。「設定 > 画面表示と明るさ」から「外観モード」を「ダーク」にする。

Webが対応しないでどうする

個人的な所感ですが、開発者の中でダークモード対応は興味としては薄いように感じます。

しかし、Webこそダークモードの流れに乗るべきなのです。なぜなら、ほとんどのWebサイトの背景は真っ白じゃないですか！目が眩むし、夜眠れなくなりそうです。

私は、以前からWebサイトでダークモードの対応をしたかったのですが、OSレベルでのダークモード対応が普及していなかったため、ずっと待っていました。サイト内にダークモードボタンを設置しても、ブラウザが真っ白では意味がありませんからね。

三大OSが対応した今、もう何も遮るものはありません。

CSSだけで実装できる

ダークモード対応は、難しい技術が必要なのでしょうか。いいえ、CSSだけでいいんです。

CSSのメディアクエリの１つである、prefers-color-schemeを使います。

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。
prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN

構文によると、ダークモードがオンになるとprefers-color-schemeがdarkになり、オフだとlight、そもそも機能を持ち合わせていない場合はno-preferenceという値になります。

実際に利用する場合はどう使うのでしょうか。
おすすめは、CSS変数との併用です。既存の構造を崩さずに、ダークモード用の色彩設定を追加することができます。

例

:root {
    --header-bg: white;
    --body-bg: white;
    --body-color: black;
}

@media (prefers-color-scheme: dark) {
:root {
    --header-bg: hsl(212, 38%, 12%);
    --wrapper-bg: hsl(212, 40%, 17%);
    --body-color: #e4e4e4;
}
}

header {
    background: var(--header-bg);
}

body {
    background: var(--body-bg);
    color: var(--body-color);
}

CSS変数を参照させることで、ダークモードに切り替わると一斉に色が変わります。

imgタグの画像の切り替えは若干面倒ですが、私はライト用とダーク用の2つを連続で並べて、CSSでdisplay: noneとdisplay: inlineを入れ替えるようにしました。

大変だけど

これまで白ベースで作ってきたサイトにとっては、ダークモードの対応は破壊的な修正にあたります。角丸で四隅が白い画像だとか、色でごまかしていた要素の境目などを、見直さなければいけません。

しかし、それはデメリットばかりではありません。それは、負の遺産になりかけていたCSSを直すチャンスかもしれません。（少なくともうちのサイトは構造から改善しました）

三大OSがダークモードに対応した今、時代の流れはダークモード対応です。
実装自体は簡単ではあるものの、色使いの検討や構造の見直しに割と時間がかかるので、早め早めに手を付けたいものです。
アクセシビリティとか言って、やがて対応に迫られてくるのは間違いありません。