SafariがAdaptive Dark Modeを27.3で導入

Adaptive Dark Modeの紹介

Safari 27.3 betaでAdaptive Dark Modeを導入できることを嬉しく思います。ユーザーが有効にすると、Safariはライトモードのウェブサイトを適応させ、ダークモードで表示します。

2019年春、Safari 12.1はウェブでダークモードをサポートした最初のブラウザとなりました。多くの人がダークモードの使用を好みますが、すべてのウェブサイトにダークバージョンがあるわけではありません。ウェブページの読み込みの約40%がダークモードのユーザーによるものですが、それをサポートしているのはわずか10%です。ダークモードがお好きなら、特に明るいと感じるサイトに遭遇したことがあるかもしれません。Adaptive Dark Modeは、このギャップを埋め、ウェブ全体で一貫したダークエクスペリエンスを提供するために設計されています。

［画像: 左がライトモード、右がダークモードのデモウェブサイト。多くのUI要素と色が含まれる複雑なサイトが、Adaptive Dark Modeによって変換されています。］

Safari 27.3 betaで今日から試すことができます。有効にするには、まずシステムの外観がダークに設定されていることを確認してください。次に、明るい背景のウェブサイトにアクセスします。SafariがAdaptive Dark Modeのプレビューを提供します。「試す」をタップしてください。

HTMLで<meta name="color-scheme" content="light dark">またはCSSでcolor-scheme: light darkを使用してダークモードのサポートを通知しているウェブサイトの場合、Adaptive Dark Modeは何も変更しません。それ以外のウェブサイトでは、ページの色を分析し、主にライトかダークかを推定します。ページが一般的にダークな背景にライトテキストを持っている場合、何も変更されません。ページがライトな外観を持っている場合、Adaptive Dark Modeはそのページをダークに適応させます。

Adaptive Dark Modeはどのように機能しますか？

Adaptive Dark Modeの中核は色の変換です。色が単に装飾的な場合もあれば、意味的な意味を持つ場合もあります。Adaptive Dark Modeは、要素が見えるように色を反転させるべきか、色を変更しないでおくべきかを判断します。

Adaptive Dark Modeの開発中に、色相を維持しながら色の輝度を反転させるためのカラーマトリックスを開発しました。これは、明るい背景を暗くし、暗いテキストを明るくするために使用されます。テキストの色を変換する際、Adaptive Dark ModeはWCAG 4.5:1のコントラスト比で定義される十分なコントラストを目指します。CSSのライトグラデーションもダークに変換されます。

Adaptive Dark Modeは、変換されたコンテンツが見栄えが良く、使用可能であり続けるように慎重な判断を行います。ボタンは背景に対してコントラストを持ち、テキストは画像の上に表示され、ホバーメニューは明確に見えます。

画像に関しても同様の配慮がなされています。ほとんどの画像は変更されず、その完全性が保たれます。しかし、多くのアイコンやロゴは、背景色が反転されるとコントラストを失うことがあります。そのため、Adaptive Dark ModeはSVG画像を検査し、必要に応じて色を変換します。ビットマップ画像については、ピクセルヒストグラムを分析し、単純な白黒のロゴを反転させます。

［画像: SafariのInterop 2026ダッシュボードのサイドバイサイドスクリーンショット。左は元のライトモードウェブサイト。右はAdaptive Dark Modeで変換されたサイト。グラフはライトモード（未変換）と一致していますが、ページ上の他のすべてはダークになっています。］

マスクやmix-blend-modeのようなエフェクトは、色が変換された要素に対して望ましくない結果を生む可能性があるため、場合によってはAdaptive Dark Modeがそれらのエフェクトを無効にします。また、<canvas>コンテンツは、予測が困難な幅広いコンテンツを含むため、変更されません。

Adaptive Dark ModeがWebKitブラウザエンジン内で深く処理されるからこそ、最も複雑な課題を解決するための創造的な方法を見つけ、変換を非常に高速かつ電力効率よく適用し、同時にユーザーのプライバシーを厳格に保護することができます。

サイトをさらに良く機能させる方法

一般的に、ウェブページがAdaptive Dark Modeでうまく機能するのは、優れたモダンなウェブ開発プラクティスに従っている場合です。

サイトが古い技術を使用している場合でも、簡単な更新で改善できます。ロゴやアイコンについては、ビットマップ画像をSVGに置き換えてください。タイル状の背景画像ではなく、CSSでソリッドまたはグラデーションカラーを使用してください。モダンCSSを使用して、角丸、影、ボタンの状態を、画像スプライトの代わりに作成してください。ページの背景色を画像に焼き付けるのではなく、透明な背景を持つコンテンツ画像を作成してください。コンテナにパディングを追加して、混雑を防いでください。

ページの一部に対して特定のダークモードエクスペリエンスが必要な場合は、関連要素にcolor-scheme: light darkを適用し、独自のダークスタイルを追加してください。

独自のダークモードを構築する

サイトの外観をダークモードで完全に制御するには、完全なサポートを追加してください。今がその絶好の機会です。これほど簡単なことはありませんでした。

［画像: 上記のデモウェブサイト。今回は、3番目のブラウザウィンドウに、そのウェブサイトがカスタムダークモードでどのように見えるかを示しています。］

ライトモード（左）のウェブサイトと、Adaptive Dark Modeが適用された状態（中央）の例です。サイトがカスタムダークモードを作成した場合、3番目のバージョン（右）のようになります。

ダークモードを完全にサポートするために必要なすべてのウェブ技術は、今日広く利用可能です。これには以下が含まれます。

• <meta name="color-scheme" content="light dark">
• :root { color-scheme: light dark }
• @media (prefers-color-scheme: dark) { }
• <picture><source media="(prefers-color-scheme: dark)">
• light-dark()

color-mix()やcontrast-color()のような新しいCSS関数、およびCSS変数でデザインシステムを整理するための一般的なテクニックは、追加のオプションと柔軟性を提供します。

HTMLの<head>にcolor-schemeメタタグを使用するか、CSSで:rootまたはbodyにcolor-schemeプロパティを設定して、ダークモードのサポートを宣言してください。JavaScript経由で後からこの情報を注入しないでください。このベストプラクティスにより、サイトが可能な限り迅速に正しくレンダリングされることが保証されます。

「ライトのみ」カラー・スキームの使用

ウェブアプリまたはウェブサイトがAdaptive Dark Modeによって変換されないようにしたい場合は、color-schemeを使用してそれを伝えることができます。HTMLの<meta name="color-scheme" content="light only">タグは、ブラウザに1) このページがlightモードをサポートしていること、および2) lightモードでのみ表示されるべきであることを知らせます。color-scheme: light onlyルールも同様のことを行いますが、CSSの柔軟性により、ページの特定の要素のみをターゲットにすることができます。もちろん、:root { }でページ全体をターゲットにすることもできます。（注意: 「only」キーワードはSafari 27.3 beta 1ではサポートされていません。Adaptive Dark Modeがベータプロセスを通じて進化するにつれて、再度確認してください。）

ユーザープライバシーの保護

Appleは、ユーザープライバシーが基本的な人権であると強く信じています。ウェブサイトがユーザーがAdaptive Dark Modeを有効にしたことを検出できた場合、それはフィンガープリント可能な情報量を増やし、トラッカーに対するプライバシー保護を弱めることになります。

その結果、SafariはウェブサイトがAdaptive Dark Modeが適用されたことを検出できないようにします。CSS色をクエリするJavaScriptは、変換された色ではなく、元の作成された色を取得します。Canvasに描画された画像は、元の形式でレンダリングされます。

フィードバック

ウェブサイトまたはウェブアプリを管理しており、Adaptive Dark Modeがプロジェクトをどのように適応させているかについて議論したい場合は、web-evangelist@apple.comまでお気軽にご連絡ください。

ユーザーとしてAdaptive Dark Modeを試してみて、うまく機能しないサイトを見つけた場合は、フィードバックアシスタントにレポートを送信していただけると幸いです。（フィードバックの送信方法について詳しく学ぶ）

---