白い背景を前提に作ったコーポレートサイトを、閲覧する人のブラウザが暗い配色へ変えて表示する。そうなると、濃い色の文字を焼き込んだ画像が背景に溶けたり、白い背景を含む写真や図だけが明るく浮いたりするおそれがあります。制作した側は、自分の画面では一度も見たことのない状態で、顧客に見られることになります。
2026年11月3日に公開されたSafari 27.3のベータ版には、この「明るいページを暗く変換して見せる」機能が入りました。利用者が有効にしたときだけ働く機能です。正式版の公開時期は書かれていませんが、ベータに入った段階で、ダークモードを用意していないサイトを一度確かめておく価値があります。本記事では、AppleのリリースノートとWebKitの公式ブログで分かることを整理し、当サイトのCSSで確かめた結果とあわせて、制作・保守の側で見ておく点をまとめます。
リリースノートに書かれていること
Appleの「Safari 27.3 Beta Release Notes」は、2026年11月3日の公開で、版は27.3 beta（20626.1.12）です。対象は、iOS 27.3 beta、iPadOS 27.3 beta、visionOS 27.3 beta、macOS 27.3 beta、macOS 26、macOS Sequoia のSafariです。
描画（Rendering）の新機能として、次の1行があります。
Added Adaptive Dark Mode, which automatically adapts bright web pages that don’t natively support dark mode, giving users an optimized viewing experience when browsing at night or in dark environments.
訳すと「Adaptive Dark Modeを追加。ダークモードにネイティブで対応していない明るいWebページを自動で適応させ、夜間や暗い環境での閲覧に最適化した表示を提供する」です。同じ節には、XMLの文書を表示する画面のダークモード対応も加わっています。
WebKitのブログで分かること
リリースノートの1行だけでは動作の条件が分かりません。同じ11月3日に公開されたWebKitの公式ブログ「Introducing Adaptive Dark Mode」が、制作側の知りたい点を説明しています。ブログによると、ページの読み込みの40%近くはダークモードの利用者によるものですが、ダークモードに対応しているページの読み込みは10%にとどまります。
- 有効にするのは利用者: 「When enabled by a user」と書かれています。試すには、システムの外観をダークにして明るい背景のサイトを開き、Safariが見せるプレビューで「Try」をタップします
- 対象外になる条件:
<meta name="color-scheme" content="light dark">またはCSSのcolor-scheme: light darkでダークモードへの対応を示しているサイトは、何も変わりません - それ以外のページ: 色を見て全体が明るいか暗いかを推定します。もともと暗い背景に明るい文字のページは変えず、明るいページを暗く変換します
- 色の変換: 色相を保ったまま明度を反転し、明るい背景を暗く、暗い文字を明るくします。文字はWCAGのコントラスト比4.5:1を目標にし、明るいCSSのグラデーションも暗くします
- 画像: 多くの画像はそのままです。SVGは中身を調べて必要なら色を変え、ビットマップの画像は画素の分布を見て、単純な白黒のロゴを反転します。
<canvas>の中身は変えません - 効果の扱い: マスクや
mix-blend-modeは、色を変えた要素で望ましくない結果になることがあるため、場合によって切られます - サイトからの検知: できません。プライバシーの保護のため、JavaScriptで色を読んでも変換前の色が返ります。確かめるには、画面を見るしかありません
止める指定は、ベータ1では効きません。 変換を避けたいサイト向けに、ブログは <meta name="color-scheme" content="light only"> または color-scheme: light only を挙げています。CSSなら特定の要素だけに指定することもできます。ただし、only のキーワードはSafari 27.3 beta 1では未対応と注記されています。ベータの進行に合わせて確認するよう書かれているので、指定を入れる場合は、正式版までの間に実機で効くことを確かめてください。
動画や iframe の中身の扱い、only がいつ使えるようになるか、正式版の公開時期は、確認した資料に書かれていません。本記事では推測で埋めません。
当サイトのCSSで確かめたこと
参考までに、このサイト（gleamhub.net）のソースを2026年11月6日に確認しました。
- メディアのページ（GH Media）: 共通のCSSの
:rootでcolor-scheme: light darkを指定し、背景をlight-dark()で切り替えています。ダークモードの配色を自前で用意している状態で、WebKitの説明に照らすと変換の対象外です - コーポレートのページ:
color-schemeの指定も、prefers-color-schemeのスタイルもありません。明るい配色だけで作っています
WebKitの説明に照らすと、コーポレートのページは、利用者が機能を有効にしていて、明るいページと推定されれば、暗く変換される側に入ります。実機で確かめた結果ではありません。同じように「明るい配色だけで作ったサイト」は、正式版の前に実機で見ておく対象になります。
ベータの実機で見ておく場所（編集部の提案）
ブログの説明から考えると、崩れが出やすい候補は、色をCSSではなく画像に焼き込んでいる部分と、変換の対象から外れる部分です。ベータを入れた端末で機能を有効にし、次の順に見ることを提案します。実機で崩れを確かめたものではありません。
- ロゴ: ビットマップの画像で反転の対象になるのは単純な白黒のロゴです。濃い紺など色の付いた透過のPNGは、背景が暗くなると読めなくなるおそれがあります。SVGのロゴも、変換後の色を見ておきます
- 白い背景を含む画像・図: 多くの画像は変換されないため、料金表や手順の図を画像で載せている場合は、そこだけ白く浮く可能性があります。図の中の文字が読めるかも確かめます
- タイル状の背景画像とスプライト: ブログが置き換えを勧めている古い手法です
- マスク、
mix-blend-mode、<canvas>: 効果が切られた部分の見え方と、<canvas>だけ明るいまま残らないかを見ます - ブランドの色: 色相は保たれても明度が変わります。ボタンや見出しの色が、コーポレートカラーとして許容できるかを見ます
- フォームと埋め込み: 問い合わせフォーム、地図、外部サービスの
iframe。入力欄の文字と背景の組み合わせが読めるかを確かめます - 印刷・PDFへの書き出し: 画面の配色の変更が、印刷に影響しないかを見ます。この点はブログに書かれていません
崩れが見つかった場合の直し方として、ブログは次を挙げています。
- ロゴやアイコンを、ビットマップからSVGに替える
- タイル状の背景画像を、CSSの単色やグラデーションに替える
- 画像のスプライトを、角丸や影などのCSSに替える
- 本文の画像は、ページの背景色を焼き込まず、透過の背景で作る
- コンテナに余白を足して、要素が詰まらないようにする
ページの一部だけ独自の暗い配色にしたい場合は、その要素に color-scheme: light dark を指定し、自前のスタイルを足します。見た目を完全に制御するなら、ダークモードを実装して、HTMLの head か、:root・body のCSSで宣言します。JavaScriptで後から足さないよう、ブログは注意しています。
color-scheme: light dark はダークモードに対応しているという宣言なので、配色を用意しないまま変換を止める目的だけで入れるのは避けたほうが安全です（編集部の見方）。ダークモードの切り替えの作り方は、ダークモードの切り替えを3択にしない記事で整理しています。
同じ版で削除・追加された主な仕様
Adaptive Dark Mode のほかにも、27.3ベータには制作・保守に関係する変更があります。リリースノートから、既存のサイトに影響し得るものと、使えるようになるものを抜き出しました。
| 区分 | 内容 | 確かめること |
|---|---|---|
| 削除 | -webkit-line-clamp の非標準の値 percentage | パーセントで指定していないか（当サイトは整数の指定だけで影響なし） |
| 削除 | グリッドのコンテナでの margin-trim、DataTransferItemList.prototype.item()、dominant-baseline の3つの値 | 該当の記述がないか（当サイトのソースでは該当なし） |
| 追加 | viewportの <meta> の interactive-widget（キーボード表示時のページの反応を指定） | スマートフォンのフォームで、入力欄がキーボードに隠れないか |
| 追加 | Origin-Agent-Cluster ヘッダー（document.domain は既定で引き続き使える） | サブドメインをまたぐスクリプトの有無 |
ほかに、CSSの if()・attr()・@function・corner-shape、接頭辞なしの user-select、JavaScriptの Temporal などの対応も加わっています。ベータの段階なので、他のブラウザと揃うまでは @supports などで代わりの表示を用意したうえで使うのが無難です。Safari 27でのモジュールの読み込みの修正は、Safari 27のtop-level awaitの記事で扱いました。
確認した範囲
2026年11月6日に、Appleの開発者向けサイトの「Safari 27.3 Beta Release Notes」（2026年11月3日公開）と、WebKitの公式ブログ「Introducing Adaptive Dark Mode」（同日公開）を確認しました（資料調査）。Safari 27.3ベータの実機での表示確認はしていません。当サイトのCSSの確認は、リポジトリのソース（
src/）の検索で行ったもので、表示の結果ではありません。
既存サイトのダークモード対応や、ブラウザの更新に合わせた表示の点検は、HP制作・リニューアル相談で承っています。サイトの作りによって確かめる範囲が変わるため、お問い合わせからご相談ください。
