Webコンテンツをダークモードに対応させる

(音楽)

WebKitチームの ティム･ハッチャーです Webコンテンツのダークモードの サポートについて話します

macOS Mojaveで ダークモードが紹介された時から Webコンテンツでの使用を要望する ユーザやデベロッパの声がありました 長年Webコンテンツには 明るい色が使われてきましたが ダークモードの採用で より洗練されたものが作れます

WebKitチームはWebコンテンツに ダークモードを適用するため― デベロッパ用に標準化した方策を 開発してきました ついにmacOS MojaveのSafari 12.1で ダークモードが使えるようになりました

ダークモードが搭載されている iOS13でも―

iOSのSafariでダークモードを Webコンテンツに反映できます

この動画では Safariを例として説明しますが それ以外でもサポートしています メールでも有効ですし Webビューでコンテンツを表示する アプリケーションにも使えます

これから３つの項目について 説明していきます １つ目はダークモードを Webで用いる一般的なスタイリング ２つ目はダークモードを メールメッセージで使う方法 ３つ目はダークモードにした時の デバッグを行うツールについてです

では始めましょう

私は最近カリフォルニアを巡る旅の ブログを始めました

モバイルとデスクトップ両方で見られる レスポンシブなサイトに ダークモードを取り入れるという アイデアを思いつきました ダークモードの採用で前進的な レスポンシブデザインにできます デバイスの状況に応じて 使い分けできるのです SafariやWebKitにはコンテンツを 自動で暗くする機能はありません ユーザにコンテンツを ダークモードで見せるのは― デベロッパの仕事です このライトモードのページを ダークモードに変換させる方法を 見ていきましょう コンテンツにダークモードを 採用すると告げるには 新たなカラースキームの スタイルプロパティを採用します 今はCSS標準の中にあるもので 指定されています rootエレメントで 値をlightとdarkに指定し 両モードがサポートされていることを レンダリングエンジンに知らせます これによりデフォルトのテキストと バックグランドの色を変えられます 現在のシステムカラーである― 標準的フォームコントロールや スクロールバー等も― それに合わせて自動的に変わります プロパティの追加がブログに どう反映されたかを見てみましょう

バックグラウンドの色が 白から黒に変わっています バックグラウンドが黒なので テキストはほとんど見えません これは期待した結果ではありません このページのスタイルルールを見て 何が起きているのか調べましょう

これがページに影響を与えた 主なスタイルルールです

テキストが見えなかったのはボディの テキストカラーがblackだからです レベル１の見出しに使われている ダークグレイのテキストも 黒のバックグラウンドとの コントラストが低すぎます デフォルトはボディのテキストカラーは 黒でライトモードです

デフォルトがこうなっているので― スタイルシートからオーバーライドする カラープロパティを削除します カラースキーム･プロパティを使うと デフォルトのテキストと バックグラウンドの色が 自動でダークモード値に変わります スタイルシートに 他の色も取っておくため CSS変数という CSSカスタムプロパティを使い― スタイルシート内での色を 一元的に定義します CSS変数を使うとダークモードを 採用するのが非常に簡単になります どうなるか見てみましょう

カラー値を設け中心に移動させます カラースキームを追加した時の ルートエレメントのルールと同じです

カラーの変数名は 二重ハイフンのあとに定義します

最初のスタイルルールに戻りましょう これは静的カラー値を使ったルールです

これを今 定義した変数で変更します 名前を参照するVAR関数を使うと こうなります ダークカラー･スキームをサポートする スタイルシートになりました

デバイスの画面幅に対応する ブレイクポイントのように― ダークモードに条件付けする メディアクエリを使います ユーザがダークモード･スキームを 使いたい場合です

ライトモードで定義した時と 同じCSS変数をオーバーライドし ダークモードに適したカラー値にします 変更が反映されたページを 見てみましょう カラースキームの プロパティを加えただけのものから テキストとヘッダのカラープロパティが ダークモードに適した色に変わりました しかし画像は？ モハベ砂漠の画像は このページの主役です

モハベ砂漠の画像は ServerのJPEGをソースとする― イメージエレメントに含まれています レスポンシブデザインのテクニックで 簡単にこのコードを適切に変えられます ピクチャーエレメントで 同じメディアクエリを使って デバイスに合わせた多様なバージョンの 画像をソースにできます ここでは夜のモハベ砂漠の画像に 変更するよう指定します ダークモードのカラーで使った メディアクエリを使い ダークカラースキームを好む ユーザのために― 夜の画像を条件的にロードできます こちらは どちらのカラースキームにも 同じ１つの画像を使った場合 そしてこれはダークモードに適した 砂漠の画像にした場合です これでサイトはダークモードにも ライトモードにも適応します

復習です まず新しいcolor-schemeプロパティで ライトとダークモードの採用を 宣言します コンテンツが使うカラースキームを レンダリングエンジンに伝えるためです それによりデフォルトカラーと コントロールを適合させます

デフォルトカラーが適当でない場合は カスタム値としてprefers-color- schemeのメディアクエリを使います また同じメディアクエリで pictureエレメントの中の 他の画像もレスポンシブに ダークモードのソースにできます カラースキームを採用する際に CSS変数を使えば 両方のモードをコンテンツに 容易に適用させることができます さらにメールメッセージにも ダークモードは使えます

macOS Mojaveでのメールと同じように iOS13に直接書かれた 単純なテキストメールであれば― ライトにもダークモードにもできます この例のように画像が 埋め込まれていても大丈夫です なぜなら単純なテキストメールは メールの自動変換機能で― ダークモードに切り替えられるからです

しかしネットからロードされる 画像を含むような― 広告のためのメールテンプレートを 設計する場合等は Webコンテンツの時と 同じスタイリングテクニックを使います カラースキーム･プロパティが 採用されなければ メールはライトモードで表示されます 普通のテキストメールとは違い ダークモードには自動変換されません

これはカラースキームの宣言を含む― ダークモード･スタイルの メールメッセージです 完璧にダークモードに適応しています

振り返ります 単純なテキストメールは 画像付きでも 自動でダークモードに変換されます ネットワーク経由の画像を用いて カスタムしたメール広告等の場合は デフォルトのライトカラー･スキームが 使われます この種のメールメッセージでも メディアクエリを使って― ダークカラー･スキームへのサポートを 宣言し対応させることは可能です

次はダークモードのコンテンツを デバッグするWebインスペクタです macOSでシステムをダークモードにした時 Webインスペクタで見栄えを確認できます これはWebデベロッパからの 強い要望に応えたものです 完成したことをうれしく思います

ダークモードを加えただけではなく― コンテンツのデバッグを助ける ツールも作りました エレメントタブにある 新たなカラースキーム･トグルにより 毎回システム全体の外観を 見直さなくても― ページの見え方を変えることができます ダークモードを使いたい場合は このボタンでライトモードでの ページの見た目をテストできます

以前と同様サイドバーのスタイルには 選択したエレメントに合うルールが― メディアクエリも含め表示されます この場合 WebKit.orgサイトの カラー変数の中から prefers-color-schemeの メディアクエリ定義を確認できます

ダークモードと Webインスペクタの説明でした― 他にもSafariとWebKitの セッションがあり― Safari13のWebインスペクタの 新機能の詳細が説明されます まとめです Webページとリッチテキスト･メールでは ダークモードを定義する必要があります SafariとWebKitは自動で ダークに変換されることはありません 普通のテキストメールでは 何も心配しなくても 自動でシステムに合うように ダークモードに変換されます Webインスペクタのエレメントタブの 新たなカラースキーム･トグルを使えば ライトとダーク両方の モードでテストできます 皆さんがこのサポートを どのように応用し― MacやiOSのアプリケーションに どう反映させるのかが楽しみです