近づくダークモード対応の足音
エグゼクティブ・フェロー 木達Apple Developer DocumentationにおいてSafari 12.1 Release Notesが公開されました。いずれリリースされるiOS 12.2とmacOS 10.14.4に同梱される、Safari 12.1のリリースノートです。注目は、昨年Safari Technology PreviewのRelease 68で実装されて以来、言及される機会が徐々に増えてきているように思うメディアクエリ、prefers-color-schemeのサポートです。
prefers-color-schemeは、私が講師の一人として登壇している2019年のWebデザイントレンド 解説セミナーでもご紹介しているのですが、ユーザーの選択したOSレベルのカラーテーマに合わせてWebページのスタイルを変更できるようにするメディアクエリです。ユーザーのニーズなり嗜好に寄り添ったビジュアルデザインをWebで提供できる可能性を更に広げるもの、と私は理解しています。
prefers-color-schemeは、Media Queries Level 5（本稿執筆時点では草案段階）で定義されています。例えばライトモードを選択しているユーザーには全体的に明るい色調の、ダークモードを選択しているユーザーには逆に暗い色調のデザインを提供できるようになります。
@media (prefers-color-scheme:light) {
/* ライトモード向けのスタイル */
}
@media (prefers-color-scheme:dark) {
/* ダークモード向けのスタイル */
}本稿執筆時点ではCan I useにある通り唯一Safari Technology Previewがサポートしている状況ですが、他のブラウザでも対応が進められています。Chromeのレンダリングエンジン、Blinkについては889087 - Add support for CSS prefers-color-scheme media feature - chromium - Monorailにある通り、実装作業中というステータスです。またFirefoxについても前向きな動きが1494034 - Add support for CSS prefers-color-scheme media featureで見受けられますが、[css-mediaqueries] prefers-color-scheme and printing · Issue #3522 · w3c/csswg-draftsで指摘されているような、仕様の不明点なり不備がなくなってからの実装になるかもしれません。
Webデザイン関連の英文記事を眺めますと、わざわざダークモードに対応することの意義や是非を問うものもあります。技術的に可能になるからといって即、対応すべきかといえばそうではないでしょう。ダークモードとライトモードの違いを踏まえて考慮すべきポイントが、単なる背景色と前景色の変更にとどまらないことは、Redesigning your product and website for dark mode -- Stuff & Nonsenseで論じられている通りです。結局は費用対効果次第というお話ではありますが、対応の要不要を検討するにはDo I have to add a dark mode now? | Koos Looijesteijnにある表などが参考になるでしょう。
果たして、ダークモード対応はこれからのWebデザインのトレンドとなるでしょうか？ Safari 12.1のリリースを目前に、その足音が近づいて聞こえているのは、きっとアクセシビリティ視点から注目している私だけではないはずです。