スプランプ(splamp.info)というサイトの管理人をしているウラルです。
来ましたよ、ダークモードの時代が。2019年はダークモード元年です。
何を言っているかお分かりでしょうか。
実は、2019年はWindows・iOS・Androidという三大OSがダークモード対応をするという、大きな時代の節目なのです。
2019年5月22日
Windows 10 May 2019 Update配信開始。「個人用設定 > 色」から「既定のアプリモード」を「黒」にする。
2019年9月4日
Android10配信開始。「設定 > ディスプレイ」から「ダークテーマ」をオンにする。
2019年9月20日
iOS13配信開始。「設定 > 画面表示と明るさ」から「外観モード」を「ダーク」にする。
個人的な所感ですが、開発者の中でダークモード対応は興味としては薄いように感じます。
しかし、Webこそダークモードの流れに乗るべきなのです。なぜなら、ほとんどのWebサイトの背景は真っ白じゃないですか!目が眩むし、夜眠れなくなりそうです。
私は、以前からWebサイトでダークモードの対応をしたかったのですが、OSレベルでのダークモード対応が普及していなかったため、ずっと待っていました。サイト内にダークモードボタンを設置しても、ブラウザが真っ白では意味がありませんからね。
三大OSが対応した今、もう何も遮るものはありません。
ダークモード対応は、難しい技術が必要なのでしょうか。いいえ、CSSだけでいいんです。
CSSのメディアクエリの1つである、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がダークモードに対応した今、時代の流れはダークモード対応です。
実装自体は簡単ではあるものの、色使いの検討や構造の見直しに割と時間がかかるので、早め早めに手を付けたいものです。
アクセシビリティとか言って、やがて対応に迫られてくるのは間違いありません。
次回は【デザイン編】として、ダークモードデザインについて記事にしようと思います。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント