本文へスキップ
MameTechNews
フロントエンド

Safari 27.3ベータ、明るいサイトを暗い表示へ変換

## POINTS

  • color-schemeをHTMLで宣言したページは変換されない。後からJSで入れると初回描画に間に合わない。
  • light onlyのonlyキーワードはSafari 27.3ベータ1では未対応。宣言だけに依存しない。
  • 変換の有無はページ側から検知できない。計測とテストは、元の指定色が返る前提で組む。

WebKitは11月3日、Safari 27.3ベータでAdaptive Dark Modeを公開した。利用者が有効にすると、明るいサイトを暗い表示へ変換する。同チームによると、ページ読み込みの約40%はダークモードの利用者から来ている一方、ダークモードに対応した読み込みは約10%にとどまる。

HTMLのcolor-schemeメタタグ、またはCSSのcolor-scheme: light darkを出しているサイトは変換しない。それ以外は色を見て、明るいページなら輝度を反転し、色相は残す。文字色はWCAGのコントラスト比4.5:1を目安にする。SVGや単純な白黒ロゴは調整し、canvasの中身は変えない。変換の有無はサイトから検知できず、JavaScriptから読む色は変換前の指定色のままだ。

自前のダークモードを出すなら、color-schemeをHTMLの先頭で宣言し、JavaScriptで後から注入するのは避ける。変換されたくないページはcolor-scheme: light onlyを使えるが、onlyキーワードは27.3ベータ1では未対応だ。ベータの間は、宣言の有無でスクリーンショットとコントラストが分かれる前提で確認する。