ウェブユーザーの大部分がダークモードを好む一方で、ウェブ開発には大きな格差が存在します。ページ読み込みの約40%はダークモードを使用しているユーザーによって行われていますが、それらのページのわずか10%しかネイティブのダークテーマをサポートしていません。この格差を埋めるために、Safari 27.3はアダプティブ・ダークモードを導入しました。この機能を有効にすると、ブラウザはダークモードのサポートをシグナルとして送っていないウェブサイトを特定し、その外観を自動的に適応させます。もしサイトが標準的なHTMLメタタグやCSSプロパティを使用して既にサポートを宣言している場合、Safariは開発者の元のデザインを尊重し、変更を加えることはありません。
この画像は、輝度を反転させることでネイティブのダークモードサポートを欠くウェブサイトを特定し適応させるブラウザの能力を示しています。
この変換はWebKitブラウザエンジンの深部で行われ、高速で電力効率の高いカラー処理を可能にします。システムの核心となるのは、元の色相を維持しながら色の輝度を反転させるカラーマトリックスの使用です。これにより、ライトな背景はダークになり、ダークなテキストはライトになることで、可読性を維持したまま変換が行われます。エンジンは、テキストの視認性を確保するためにWCAG 4.5:1のコントラスト比を具体的にターゲットとしています。さらに、システムは装飾的な色と意味的な色を区別し、ボタンが背景に対してコントラストを維持し、テキストが画像の上でも読みやすさを保つように慎重な判断を下します。
アダプティブ・ダークモードは、ロゴやアイコンなどの複雑なアセットも処理します。ほとんどのビットマップ画像は完全性を保つためにそのまま残されますが、エンジンはSVG画像を検査し、必要に応じてその色を変換します。ビットマップ画像については、ピクセルヒストグラムを分析して単純な白黒ロゴを特定し、反転させます。予測不可能な結果を避けるため、ブラウザは変換された要素に対してマスクやmix-blend-modeなどの特定の効果をオフにし、<canvas>コンテンツは完全に変更しないようにします。ユーザーのプライバシーを保護しフィンガープリントを防ぐため、Safariはウェブサイトがアダプティブ・ダークモードがアクティブであることを検知できないように保証します。JavaScriptによるCSSカラーのクエリは、変換後の値ではなく、元の作成された値を返します。
開発者はこの新機能と相互作用するためのいくつかの方法を持っています。ウェブサイトは、ブラウザに対してページをライトモードのみで表示するよう指示する`color-scheme: light only`ルールを使用することで、変換を完全に拒否することができます。あるいは、開発者は`light-dark()`、`color-mix()`、`contrast-color()`などのモダンなCSS関数を使用してネイティブのダークモードを実装することで、より優れた手動設計の体験を提供することもできます。アダプティブ・ダークモードで最良の結果を得るために、WebKitチームは、ロゴにはSVGを使用すること、タイル状の背景画像の代わりにCSSで単色またはグラデーションを使用すること、そして特定のページ色を焼き込むのではなく透明な背景を持つコンテンツ画像を作成することを推奨しています。
この視覚資料は、ブラウザの自動的な適応と、開発者が提供できる手動設計の体験との違いを説明しています。