Appleは2026年11月3日、iOS 27.3とmacOS 27.3の最初の開発者向けベータを配りました（Appleの配信のお知らせ）。
この中のSafariに、ダークモードを持たない明るいサイトを、Safariが暗く描き直す機能が入っています。
名前は「Adaptive Dark Mode」。
日本語の報道では、適応型ダークモードと訳されています。
白い背景で作ったホームページが、見る人のiPhoneでは黒い背景で表示されるかもしれない。
サイトの持ち主にとっては、そういう話です。
動くのは、3つの条件がそろったときだけ
WebKitの公式ブログによると、この機能は見る人が自分で有効にしたときだけ動きます。
見る人の側の操作は2段階です。
端末の外観をダークにしておき、明るい背景のサイトを開いたときにSafariが出す「暗い表示を試すか」の提案を受け入れます。
ベータ配信と同じ11月3日の9to5Macの記事では、試したあとに「明るいサイト全部に使う」か「このサイトだけ」かを選べると伝えています。
もう1つの条件は、サイトの側にあります。
HTMLの <meta name="color-scheme" content="light dark">、またはCSSの color-scheme: light dark で、ダーク表示に対応していると宣言しているサイトには、この機能は何もしません。
つまり、何も宣言していない普通の白いサイトが対象です。
中小企業や個人事業のサイトは、ほとんどがこちらに入ります。
何がどう変わるのか
WebKitのブログでは、明るさを反転させて、色味（色相）は残す計算をすると説明しています。
文字と背景の明るさの差は、WCAGの4.5対1を目安にそろえます。
明るさだけが反転するので、ブランドの色の見え方は変わります。
例えば、淡い水色の帯は、同じ青系の暗い色の帯になります。
写真は、ほとんどそのままです。
変わることがあるのは、アイコンとロゴ。
SVGの画像は中の色を調べて必要なら変え、PNGやJPEGは白黒だけの単純なロゴなら反転させる、と書かれています。
この機能が動いているかどうかは、サイトの側に伝わらない作りです。
JavaScriptで色を調べると、元の色が返ってくるとWebKitのブログは書いています。
見る人の端末を特定する手がかりに使われないための設計でしょう。
暗くされたくないときの書き方
公式に用意されている断り方は、color-scheme に light only を書くことです。
「このページは明るい表示だけ」という宣言になります。
ただし、WebKitのブログは、27.3の最初のベータでは only の指定にまだ対応していないと書いています。
今のベータでは、light only と書いても暗く描き直されます。
正式版でどう扱うかは、WebKitのブログには書かれていません（11月11日時点・未確認）。
light dark と書けば、今のベータでも描き直しは止まる仕組みです。
その代わり、「自分でダーク表示を用意している」という宣言になるので、入力欄やスクロールバーなど、ブラウザが描く部品が暗い色になります。
背景や文字の色をCSSで指定していない箇所があると、そこだけ暗くなって読みにくくなることがあります。
書き足すなら、ダークモードのiPhoneで全ページを見てからにしてください。
サイトの持ち主が確かめておく場所
正式版の配信日は、まだ決まっていません。
慌ててサイトを直す必要はありませんが、見る人が使い始める前に、どう見えるかを知っておくと安心です。
ベータ版を入れたiPhoneが手元にあるなら、端末をダークモードにして、持っているサイトを開いてみてください。
見るのは、3か所で足ります。
1つ目は、ロゴ。
白黒のロゴは反転して、白い文字になることがあります。
色の入ったロゴが、暗い背景の上で読めるかを見ます。
2つ目は、ボタンと問い合わせの案内。
ブランドの色で塗ったボタンが、暗くなって目立たなくなっていないかを見ます。
問い合わせの電話番号やボタンは、来た人がいちばん探す場所です。
3つ目は、文字を画像で作った部分。
見出しやバナーを画像にしていると、写真と同じ扱いで元の色のまま残ります。
周りだけ暗くなって、そこだけ白く浮くことがあります。
ベータ版を入れる予定がないなら、正式版が出てから同じ3か所を見れば足ります。
スマホでの見え方の話は、文字が重なったときの直し方にも書いています。
見え方が気になる箇所は、正式版の仕様が出てから直すほうが、手戻りが少なくて済みます。
手を付けにくいと感じたら、フォーム・表示の不具合修正をご覧ください。