Dark mode に対応しました
この記事は最終更新から半年以上経過しており、内容が古い可能性があります。
iOS 13, リリースおめでとう! 数ある新仕様の中でも、スマホをいじりまくる僕にとって何よりも嬉しい、というかもはや必要不可欠であるのが、OSレベルでの dark mode のサポートである。
当ブログなど、僕の管理するウェブサイトの一部においては、このたび dark mode に対応した。
なぜ dark mode が必要か
実体験として dark mode の必要性を感じたことがない人は、さぞスマホに捕らわれない良き人生を送っておられるのであろう。どうかそのままでいて欲しい。
僕のような人間は一日中スマートフォンを触っているものであり、その「一日中」には、寝る前に、電気を消した暗い部屋で眩しい画面を見つめている、テクノロジーの大衆化がもたらした醜い時間も含まれているのである。(寝る前にスマホをいじるのは本当にやめたほうがいい。こんにちは、睡眠障害。)
そんな時間に眩しい画面を触るにあたって、画面が白いか黒いかという違いは非常に大きい。白い画面は懐中電灯のように眩しく映る。黒い画面は目に優しく感じる。
ただ、ずっと黒ければそれでいいという話でもない。明るい環境下で画面を見るときは、白いほうが視認性が良い。こうして、2種類の color theme を切り替えたいという需要が生まれる。
この問題について各OSの対応はなかなか後手で、むしろ一部のモバイルアプリが先手を打って対応してきた。有名どころで言えば、Twitter, Slack などだ。しかし、ユーザーがそれぞれのアプリで設定をする必要があるのは面倒でしかなく、Dark Mode という仕様が OS レベルで必要とされているのは明らかであった。
また、Dark Mode には視認性以外での利点もあることがわかっていた。
一般的な液晶ディスプレイ (LCD) と違いバックライトを必要としない有機ELディスプレイ (OLED) においては、画面が黒っぽいというだけでかなりのバッテリー節約になるのである。Googleの調査 (Cost of a Pixel Color (Android Dev Summit '18)) では、Dark Mode を使うだけで消費電力が最大で63%減ったという。
そして、2018年の macOS Mojave を皮切りに、Android 10, そして iOS 13 と、OS側が次々と Dark Mode への対応を表明しているのである。
これはもう、乗るしかなくないか、このビッグウェーブに…。
ウェブサイト作成者としての対応
ごく一般的で簡便なウェブサイトの場合は、 prefers-color-scheme media query を用いて CSS の記述を追加/修正するだけである。
詳しくは Jxck さんの記事「prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features」をご参照いただきたい。神記事である。良すぎてこのブログ記事の必要性が疑わしい。実際ないです。すいません。
要は、技術的には media query を使って CSS 書けという単純な話でしかなく、むしろ難しいのは、どのように色を変えるかというデザイン論の方である。
以下、当ブログなど、このたび Dark Mode 対応を行ったウェブサイトにおいて、気をつけた点を控えておく。
暗めの色を控える
たとえば、僕は各リンクの色にピンク色を使っているが、これは赤よりのかなり鮮やかな色である。こういった色は白背景においては美しいが、黒背景だと、なんだか黒色に同化していきそうな、きつく暗い、微妙な色合いに感じられてしまう。
なるべく色の雰囲気を合わせつつも、暗い印象を受けないように、Dark Mode では若干色を明るくすることにした。
当ブログでは CSS を書くにあたって Less を使用している。Less の lighten() 関数はこうした需要にぴったり応えてくれた。
color: lighten(@accentColor, 10%); といった具合で明るくしたら、かなりいい感じの色になった。
画像の色編集
当ブログでは今のところ画像を使う記事がほとんどないので、画像を「暗くする」処理はひとまず見送ったが、Jxck さんの grayscale() を使うというアイデアはなかなか良いと思った。画像を使う機会が増えてきたらまた検討したい。
Twitter Widget の color theme の変更
「自分で CSS を書きましょうね」と行きづらいのが、外部コンテンツの色の変更である。 たとえば、当ブログでは自分の直近のツイートを表示するのに Twitter 公式の Embedded Timelines を使っているが、これは Twitter が用意したやや複雑なレイアウトを iframe で挿入しているものであり、色の変更はなかなか億劫である。
幸い、この widget は dark theme を用意してくれている。しかし残念ながら、ユーザーの設定を読んで自動で変更される機能は提供されていない。 そこで、ユーザーの設定に合わせて異なる theme パラメータをつけて挿入するべく、テキトーな JavaScript を書いた。
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.getElementById('tweetwidget').innerHTML =
'<a class="twitter-timeline" href="https://twitter.com/hideo54" data-tweet-limit="5" data-theme="dark"></a>';
} else {
document.getElementById('tweetwidget').innerHTML =
'<a class="twitter-timeline" href="https://twitter.com/hideo54" data-tweet-limit="5" data-theme="light"></a>';
}
かなりテキトーだが、お手軽だし、あくまで HTML を入れているだけなのでパフォーマンス的な問題はない。 CSS での設定とは違い、ユーザーの設定変更の反映に更新を必要とするが、まあそんなに頻繁に変わる設定でも重要な設定でもないので、よしとした。
余談
ここまででお察しの通り、このブログなどの使用している技術は、今となっては古臭いものである。この記事を書いていて、Less の公式ページが TLS 対応していないことに驚いてしまった。Pug も最近は全然メンテナンスされておらず、時の流れを感じる…。
このブログシステムなどを書いた数年前の僕は Pug や Less が大好きだったのだが、今はすっかり React だとか styled components だとかにハマっている。実際これらの書きやすさや、メンテナンスのしやすさはすごいと思う。暇ができたら早いこと、このブログもそういったもので書き直したい…。
最後に
前述の通り、この記事で書かれている技術的な内容は特に目新しいものではない。僕の管理するウェブサイトは小さなものばかりで複雑なものはないので、世間に知られていない新たなノウハウを見つけるようなことはなかった。
それでも今回筆をとったのは、もっと色々なウェブサイトに Dark Mode に対応してほしいという気持ちがあったからだ。それを声高に求めるために、まずは自分が対応し、アピールすることで、身近な人のやる気を上げようという画策である。
Dark Mode の存在自体は徐々に知られ始めたように思うが、その効能についての認知度はまだ低いように思う。 しかし、iOS 13 の登場により多くのユーザーが Dark Mode に慣れ親しむようになり、これからどんどん対応が求められるようになっていく可能性がある。
Apple は UIKit を Dark Mode 対応させることで、簡素なiOSアプリを半自動的に Dark Mode に対応させることができる。また、独特の権力を使って、iOS App 開発者に対して対応を強いることができる (その良し悪しの話はおいといて)。
Webの世界ではそうはいかない (各ブラウザがデフォルトのCSSを設定することは可能だが、歓迎されないだろう)。しかし、今後もし Dark Mode の存在がユーザーにとって当たり前になっていけば、常に真っ白なサイトは敬遠されるようになるかもしれない。
この些細な記事を読んでくれた人を始めとして、Dark Mode 対応のウェブサイトが広がっていくことを願いたい。
オチ
こんな記事を書いておいてだが、実はなんと僕はまだ Web ブラウザを持った OLED 端末を持っていない…つまりこの記事で主張した想定環境での実際のユーザー体験は未検証である! 今日手にする予定の iPhone 11 Pro がそのデビューとなる。 いざ検証してみたら「うっわ見づれえw」となっていないか、どきどき。