Safari の「適応型ダークモード」への備え：color-scheme の正しい宣言と崩れやすい実装

何が起きるか

ユーザーが機能を有効にすると（システムの外観がダークのとき、明るいサイトでプレビューが提案される）、Safari がページの背景色・文字色・SVG・グラデーションを解析し、色相を保ったまま明度を反転して暗くする。文字はコントラスト比 4.5:1 を目標に調整。写真などの画像と <canvas> は基本的に変換しない。単純な白黒のビットマップロゴや SVG は必要に応じて変換される。もともと暗いページは変化しない。

宣言の使い分け

<!-- ダークモード対応済み：変換の対象外になる（meta で書くのがおすすめ） -->
<meta name="color-scheme" content="light dark" />

<!-- 暗い背景のサイト：フォーム部品・スクロールバーも常に暗く揃う -->
<meta name="color-scheme" content="dark only" />

<!-- 明るいままにしたい・変換させたくない -->
<meta name="color-scheme" content="light only" />

• color-scheme は CSS（:root { color-scheme: light dark; }）でも書けるが、<meta> の方が CSS の読み込みを待たずに配色が決まり、初期表示のちらつきを防げる。JS で後から差し込むのは避ける。
• ダークモード未対応なのに light dark を宣言しない。 OS がダークだと既定の背景色・文字色がダーク用のシステムカラーになり、「文字色だけ暗く指定して背景色は未指定」のような箇所で文字が背景に同化する。海外製のリセット CSS やフレームワークが勝手に宣言していることがあるので確認して外す。

一部だけ自前で配色する

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

要素に color-scheme: light dark を付けてダーク用のスタイルを自分で書けば、その部分は自動変換に頼らずに済む。

崩れやすい実装（チェックポイント）

• 明るい背景画像の上の文字：画像は変換されず文字だけ明るくなり、読めなくなる。文字を載せる背景は CSS の単色・グラデーションにする。
• mix-blend-mode や CSS マスク：変換後に意図しない結果になるため、Safari が無効にすることがある。
• 背景色を焼き込んだ画像（白背景のロゴ PNG など）：暗い背景の上に白い四角が浮く。透過背景で書き出す、ロゴやアイコンは SVG にする。
• <canvas>：中身は変換されないので周りと明暗が食い違う。getComputedStyle() で取れるのは変換前の色で、適用中かどうかを JS で検出する手段もない（フィンガープリント対策）。

WebKit が勧める対応は、ロゴ・アイコンの SVG 化、背景はタイル画像ではなく CSS の単色やグラデーション、角丸・影・ボタンの状態を画像スプライトではなく CSS で描く、画像は透過背景で作る、など。

注意点・対応状況

• 2026-11 時点で Safari 27.3 beta の機能。今後の仕様変更に注意。
• Safari 27.3 beta 1 では only による変換の抑止がまだ効かない（今後の beta で要確認）。
• light only で変換を止めると、ダークで見たいユーザーの希望を打ち消すことになる点も考える。
• 一番確実なのは自前でダークモード対応すること。関連: ダークテーマでは color-scheme も指定してフォーム部品・スクロールバーを暗くする、light-dark() で背景画像もライト／ダークで切り替える

出典

• @tak_dcxi（2026-11-10、TAKLOG「Safari 27.3 betaの「適応型ダークモード」で、ダークモード未対応のサイトが受ける影響と対策」）