Safari 27.3 betaで、新機能「適応型ダークモード」（英語名はAdaptive Dark Mode）が登場しました。

Introducing Adaptive Dark Mode

We’re excited to announce Adaptive Dark Mode in Safari 27.3 beta.

webkit.org

これは、ユーザーがこの機能を有効にすると、Webサイトがダークモードに対応していなくても、Safariが背景色・文字色・SVG・グラデーションなどを解析し、自動でダークモードに変換する機能です。

WebKitの記事によると、Webのページの読み込みのうち約40%はダークモードのユーザーによるものですが、ダークモードに対応したページの読み込みは約10%にとどまります。この差を埋め、Web全体で一貫した暗い表示を提供することが目的とされています。

待望の強制ダークモードということで、求めていた人には朗報な機能ではあるものの、ユーザーの設定次第で見た目が変わるということなので、既存のサイトの制作者にも影響が及ぶ可能性があります。

「適応型ダークモード」を有効化する方法

システムの外観をダークにした状態で、背景の明るいサイトを開くとSafariが適応型ダークモードのプレビューを提案します。そこで「Try」を選ぶと有効になります。

現在はbeta版のみなのでこの先どうなるかは分かりませんが、「システムの外観をダークにする」という緩い条件で提案されるということなので、Safariの設定に疎いユーザーにも「適応型ダークモード」が浸透する可能性が高いです。

ダークモード変換の仕組み

単純な色の反転ではない

適応型ダークモードは、CSSで定義された色をそのまま反転するのではなく、色相を保ったまま明度を反転するカラーマトリクスで変換します。明るい背景は暗く、暗い文字は明るくなります。

テキストは、WCAGのコントラスト比4.5:1を目標に調整されます。必ず4.5:1を満たすと保証されているわけではありません。明るいCSSのグラデーションも暗く変換されます。

一方で、すべての色を変換するわけではありません。装飾としての色と、意味を持つ色を見分け、見えなくならないよう反転すべき色と、そのまま残すべき色を判断しているとのことです。（この辺りはSafariの判断に依ります）

変換するかどうかはページの色から判断する

ダークモードへの対応を宣言していないページでは、Safariがページの色を解析し、全体として明るいか暗いかを推定します。そのため、デフォルトで暗い背景に明るいテキストのページなら何も変化は起こらないようです。原則的に明るいページだけを暗く変換します。

画像や canvas は基本的に変換しない

写真などの画像は、基本的にそのまま表示します。この辺りは強制カラーモードと同じです。ただし、適応型ダークモードは、ユーザーが指定したパレットに色を置き換える強制カラーモードとは別の機能です。

また、<canvas>の内容も変換されません。canvasに描かれる内容は幅が広く、予測できないためです。

ただし、背景が暗くなると、アイコンやロゴの多くはコントラストが足りなくなります。そういった事情から、次の2つは変換されることがあります。

• SVG画像: 中の色を調べ、必要に応じて変換される
• ビットマップ画像: ピクセルのヒストグラムを解析し、単純な白黒のロゴなら反転される

実際のサイトでの見え方

Safari 27.3 betaで、実際のサイトに適応型ダークモードを当ててみました。

今回確かめたYahoo! JAPANのトップページは、比較的自然で読みやすい表示になりました。背景は暗く、文字は明るく変換され、ロゴやアイコンやニュースの写真は元の色のまま残っています。

一方、背景に画像を敷いているページはうまく変換されないことがあります。その例は後の「既存のサイトで起きうる問題」で紹介します。

対象から外れる条件

color-scheme: light darkを宣言しているサイトは変換されない

すでにダークモードに対応し、color-schemeでlight darkを宣言しているサイトは、適応型ダークモードの対象になりません。宣言はHTMLの<meta>要素とCSSのどちらでも構いません。

<meta name="color-scheme" content="light dark" />

:root {
	color-scheme: light dark;
}

WebKitの記事では、JavaScriptで後から差し込むのではなく、HTMLの<head>や:rootのCSSで最初から宣言するよう勧めています。

color-schemeは<meta>要素で書くことを推奨します。CSSで書くと、ブラウザはCSSを読み込んで解析するまでページの配色を決められず、読み込みの途中で背景が白や黒にちらつく可能性があるためです。<meta>要素ならCSSを待たずに配色をブラウザに伝えられるので、初期描画時の配色の切り替わりを抑えられます。CSSを読み込めなかった場合も、背景色とスクロールバーやフォーム部品の配色がユーザーの設定に従います。

仕様上はどちらで書いても構いませんが、私はCSSで書くのはコンポーネント単位で配色を変える場合や、CSSをHTMLにインラインで埋め込んでいて読み込みの遅れを気にしなくてよいときに限るのがよいと考えています。

ダークモードに対応していないならlight darkを宣言しない

変換を避けたいからといって、ダークモードに対応していないサイトでcolor-scheme: light darkを宣言してはいけません。この宣言は「このページはダークモードの配色にも対応している」という意味なので、OSの外観がダークのときブラウザはページの既定の背景色と文字色を暗い配色のシステムカラーにします。

背景色や文字色の指定がない場合、このシステムカラーが当たります。例えば文字色だけを暗い色で指定して背景色を指定していなければ、暗くなった背景の上に暗い文字が載り、文字と背景が同化して読めなくなります。フォーム部品やスクロールバーも暗い見た目で描かれるので、明るいデザインの中で浮いてしまいます。

自分で書いた覚えがなくても、海外製のリセットCSSやフレームワークがcolor-scheme: light darkを宣言していることがあります。私は普段ダークモードでブラウジングをしていますが、たまにテキストと背景が同化しているサイトを見かけます。ダークモードに対応していないなら既存のサイトのCSSも確かめて、この宣言を取り除いておきましょう。

背景が暗いサイトの場合は、dark onlyを宣言しておくとよいでしょう。ユーザーの外観の設定に関係なく、スクロールバーやフォーム部品も暗い見た目になるため、ページと配色が揃います。

<meta name="color-scheme" content="dark only" />

背景が明るいサイトの場合は、color-schemeは何も指定しなくて構いませんが、適応型ダークモードの変換も避けたいときは次に紹介するlight onlyを宣言します。

color-scheme: light onlyで変換を抑える

ダークモードに対応する予定がなく、明るい表示のままにしたい場合は、light onlyを宣言します。

<meta name="color-scheme" content="light only" />

:root {
	color-scheme: light only;
}

CSSで書く場合は、:rootではなく特定の要素に指定することもできます。

ページの一部だけを外す

ページの一部だけを変換から外したい場合やコンポーネント単位で配色を変更したい場合は、その要素にcolor-scheme: light darkを指定し、ダークモードのスタイルを自分で書きます。

.chart {
	color-scheme: light dark;
	background-color: light-dark(#fff, #1c1c1e);
	color: light-dark(#1c1c1e, #f2f2f7);
}

既存のサイトで起きうる問題

背景画像の上の文字が読みにくくなることがある

WebKitの記事によると大半の画像は変換されません。画像の上の文字の見やすさも考慮するとされていますが、明るい背景画像が変換されずにその上の文字だけが明るく変換されると、文字と背景のコントラストが不足することがあります。

例えば、龍が如くポータルのニュースの一覧は明るい背景画像の上に文字を置いています。適応型ダークモードでは、記事の題名や日付が明るい色に変換され、背景画像に同化してほとんど読めなくなりました。

WebKitの記事も背景にタイル状の画像を敷かずにCSSの単色やグラデーションを使うよう勧めています（後の「WebKitが勧めている対応」を参照）。文字を載せる背景を画像で描いているサイトは、適応型ダークモードで表示を確かめておきましょう。

mix-blend-modeやCSSのマスクが無効になることがある

色を変換した要素にマスクやmix-blend-modeをかけると、意図しない結果になることがあります。そのため、適応型ダークモードはこれらの効果を無効にする場合があります。

ブレンドモードで文字や画像の色を背景になじませているデザインや、マスクでアイコンの形を描いている実装は、見た目が変わる可能性があります。

背景色と画像やSVGの配色が揃わなくなる

背景色は変換される一方で、写真などの画像は変換されません。SVGや白黒のロゴは変換されることがあります。

そのため、画像の中に背景色を焼き込んでいる場合（白い背景のロゴ画像を白い背景に置いているなど）、暗くなった背景の上に白い四角が浮いて見えることがあります。SVGだけが変換され、隣のビットマップ画像とは配色が揃わない、といったことも起こりえます。

canvasと周りのHTMLの見た目が食い違う

<canvas>の内容は変換されないので、canvasで描いたグラフなどが、暗くなった周りのHTMLの中で明るいまま表示されます。canvasに描いた画像も、元の色のまま描かれます。

JavaScriptからは変換前の色しか取れない

getComputedStyle()などでCSSの色を取得すると、変換後の色ではなく、制作者が書いた元の色が返ります。CSSの色を読み取って<canvas>などに描いている実装では、HTMLと<canvas>の色がさらに食い違うことになります。

また、適応型ダークモードが適用されているかどうかをJavaScriptから検出することもできません。検出できるとフィンガープリンティングに使える情報が増えるため、プライバシーの観点から隠されています。

WebKitが勧めている対応

WebKitの記事では、適応型ダークモードでの見た目を良くするために、次の対応を勧めています。

• ビットマップのロゴやアイコンをSVGにする
• 背景にタイル状の画像を敷かず、CSSの単色やグラデーションを使う
• 角丸、影、ボタンの状態を、画像のスプライトではなくCSSで描く
• コンテンツの画像は、ページの背景色を焼き込まず、透過した背景で作る
• コンテナにpaddingを足し、要素が詰まらないようにする

一番確実なのは制作者側でダークモードに対応することです。color-scheme、prefers-color-schemeのメディアクエリ、<picture>の<source media="(prefers-color-scheme: dark)">、light-dark()関数などを使えば、変換をSafariに任せずに済みます。ダークモードに対応しているUIライブラリを用いるのも手でしょう。

しかし、UIライブラリを用いるWeb開発の分野はともかく、オリジナルのデザインをフルスクラッチで実装するWeb制作の分野では、ライトモード/ダークモード両対応のサイトを作るのはデザイナーのコスト的にも厳しいものがあります。そのような環境ではブラウザを信用して配色変更を委託するのがベターかもしれません。

そもそもダークモードに対応するべきか

適応型ダークモードの登場で、ダークモードに対応するかどうかを改めて考えた制作者も多いと思います。ただ、対応の必要性や効果はユーザーや利用環境によって異なります。よく挙げられる理由とその補足や条件は次のとおりです。

AndroidもAppleも、暗い環境での見やすさや明るい光に敏感なユーザーへの配慮を挙げていますが、見やすい配色は人や環境によって異なります。こうして見ると、ダークモードへの対応は必須ではなく、ダークモードを好むユーザーやダークモードのほうが見やすい環境に応える選択肢の一つと言えます。

实现深色主题  |  Views  |  Android Developers

本文档介绍了如何在 Android 应用中实现深色主题，包括深色主题的优势、如何设置主题、如何处理应用内主题更改，以及有关通知和启动画面的最佳实践。

developer.android.com

ただし、適応型ダークモードの登場で、対応しないことの意味は変わります。ユーザーがこの機能を有効にしている場合、何も指定しなければSafariによって暗く変換される可能性があります。制作者は自動変換を受け入れるかlight onlyで変換を抑えるかを検討する必要があります。なお、Safari 27.3 beta 1ではonlyによる適応型ダークモードの変換抑止は未対応です。今後のbetaで対応状況を確認する必要があります。また、light onlyを明示すると、ユーザーが求めている機能を無効にすることになる懸念もあります。

まとめ

適応型ダークモードは、ダークモードのユーザーにとっては便利な機能です。一方で、ダークモードに対応していないサイトの制作者にとっては、ユーザーの設定によって、意図しない見た目の変化が起きうる機能でもあります。

特に、mix-blend-modeやマスク、<canvas>、背景色を焼き込んだ画像を使っているサイトは影響を受けやすくなります。既存のサイトも、Safari 27.3で表示を確かめておいたほうがよいでしょう。適応型ダークモードでの表示に不具合があり、対応する余裕がない場合は、color-scheme: light onlyの宣言も検討するとよいでしょう。ただし、Safari 27.3 beta 1ではonlyによる適応型ダークモードの変換抑止は未対応なので、今後のbetaで対応状況を確かめる必要があります。

明らかに変換がうまくいっていないサイトを見つけた場合は、Feedback Assistantで報告できます。サイトの制作者は、web-evangelist@apple.com に相談することもできるとのことです。