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

2020-09-21
2020-09-19
Sessions, WWDC, WWDC19
color-scheme, CSS, CSSカスタムプロパティ, media query, Web, Web Inspector, Webインスペクタ, ダークモード
1516View
0件

Sessions

1 Session概要
2 ダークモードをWebで用いる一般的なスタイリング
- 2.1 モードによる画像の変更
3 ダークモードをメールメッセージで使う方法
4 ダークモード時のデバッグツール

Session概要

iOSとmacOSでシステム全体のダークモードを利用できるようになったため、ユーザの好みに合わせてWebコンテンツのスタイルが適切に調整されるようにする方法について。
Safariで表示する、メールAppなどの別のAppに埋め込む、App無いで使用するといった場合に、コンテンツを最適な状態で表示するためのテクニックについて。レスポンシブWebデザインにおいて新たな柱となる機能のベストプラクティスについて https://developer.apple.com/videos/play/wwdc2019/511/

ダークモードをWebで用いる一般的なスタイリング

SafariやWebKitにはコンテンツを自動で暗くする機能はない
そのため、ダークモード対応するにはCSSで新たなカラースキームのスタイルプロパティを設定します
- 下記のように実装し、レンダリングエンジンにどのモードが対応しているかを伝える
- 下記により、デフォルトのテキストと背景色、標準的フォームコントロールやスクロールバー等を自動的に変更可能
CSS変数というCSSカスタムプロパティを使用することでモードによる動的なスタイリングが可能
メディアクエリを用いてダークモードに条件付けが可能

// ダークモードの設定
:root {
  color-scheme: light dark;
}

// CSSカスタムプロパティの定義
:root {
 color-scheme: light dark;
 --post-title-color: #333;
 --header-bg-color: #593a78;
 --header-txt-color: white;
}

// CSSカスタムプロパティの使用
h1 {
 color: var(--post-title-color);
}
.header {
 background-color: var(--header-bg-color);
 color: var(--header-txt-color);
}

// ダークモード時のスタイル設定
@media (prefers-color-scheme: dark) {
  :root {
    --post-title-color: white;
    --header-bg-color: #513d66;
    --header-txt-color: #eee; 
  }
}

モードによる画像の変更

<picture> エレメントでメディアクエリを使用することでデバイスに合わせた多様なバージョンの画像をソースにできます

<picture>
  <source srcset="mojave-night.jpg"
media="(prefers-color-scheme: dark)">
  <img src="mojave-day.jpg">
</picture>

ダークモードをメールメッセージで使う方法

単純なテキストのみのメールの場合は自動的にダークモードが適用される
- 画像付きでも変換される
ただし、WebViewが埋め込まれているようなネットワーク経由でロードされる画像を含んでいる広告のためのメールテンプレートを設計するケース等はWebコンテンツと同じスタイル設定が必要

ダークモード時のデバッグツール

ダークモード対応した時の見栄えをWebインスペクタで確認可能
エレメントタブにある新たなカラースキーム・トグルにより毎回システム全体の外観を見直さなくてもページの見え方を変えることが可能
サイドバーのスタイルには選択したエレメントに合うルールがメディアクエリも含め確認できる

最新情報をチェックしよう！

フォローする