iOS 版 Vivaldi の強制ダークテーマと Web サイト配色設定の注意点
古の時代から Web ブラウザには配色設定があり、「ダークモード」の言葉がない頃からユーザーは背景色やテキスト色を任意に設定することができました。これはごく簡単な装飾のみを HTML の <font> 要素や bgcolor 属性などで行っていた時代は良かったものの、フル CSS の時代になると事実上使い物にならなくなり、また Chrome など配色カスタマイズ機能を省略したブラウザが普及したこともあって世間から忘れ去られてしまいました。
オリジナル画像
一方、2024年頃からは制作者スタイルシートの指定にかかわらずブラウザ側で強制的にダークモード（ないしそれに準じた配色）を適用する設定を備えるケースが増えてきました。
| ブラウザ | 正式版公開 | 設定項目名 | 紹介記事 |
|---|---|---|---|
| Vivaldi 6.6+ | 2024年2月 | すべてのウェブサイトにダークテーマを強制適用 | Vivaldi Blog(vivaldi.com) |
| Edge 130+ | 2024年10月 | ページの色 | Microsoft Edge Blog(blogs.windows.com) |
| Firefox 138+ | 2025年8月 | コントラスト制御 | monotonous.org(blog.monotonous.org) |
- Chrome は通常の設定画面には強制ダークモード機能はないものの、
chrome://flags/#enable-force-darkで同様の設定が可能です。これは Edge や Vivaldi ともども2024年より以前から存在していたようです。
上表は PC 版ブラウザの状況をまとめたものですが、この機能はモバイル機器でこそ需要が大きいと思います。私自身、就寝時は布団に iPad を持ち込み真っ暗な中でしばらくネットサーフィンを愉しむのですが（眼科医から怒られそう）、そのような環境下ではとてもライトモードで閲覧することはできないため、強制ダークモード機能のお世話になっています。
ところで iOS 版ブラウザのうち Firefox は強制ダークモード機能の実装に Dark Reader(darkreader.org) を使っているようなのですが[1]、Vivaldi はそれとは異なる処理のようで、しかも Web 制作者にとって興味深い現象（バグ）が見られるのです。
みなさんは Web ページ全体に対する配色は html（ないし :root）と body のどちらに設定していますか? その昔、HTML での bgcolor 属性や text 属性は <body> 要素にしか指定できませんでした。また CSS が登場した当初は Netscape Navigator 4.x 系が html に対するスタイル指定を認識しなかったため、やはり body へ指定するしかありませんでした。
/* Netscape Navigator 4.x を考慮した初期の CSS の書き方 */
body {
background-color: black;
color: white;
/* and more properties */
}CSS 2 仕様でも1998年1月28日版から以下の記述が追加されています。
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. User agents should observe the following precedence rules to fill in the background: if the value of the 'background' property for the HTML element is different from 'transparent' then use it, else use the value of the 'background' property for the BODY element. If the resulting value is 'transparent', the rendering is undefined.
この一文は多少表現は変わっているものの最新の CSS Backgrounds and Borders Module Level 3 にも残されています。
For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background using the BODY element rather than the HTML element.
通常、スタイルの指定が祖先要素に遡って反映されることはないのですが、body に対する背景指定のみは例外で、ルート要素（html）の background-image と bacground-color がデフォルト値の場合は body に指定された計算値をルート要素に伝播し、あたかも html に指定されたかのごとく扱われるということです。ただユーザーエージェントの挙動はともかく、制作者に対して背景の指定先は html より body を推奨するという記述はせいぜい2000年代前半まで必要だった啓蒙であり、今の時代に気にする必要があるのかどうかは疑問が残ります。
ページ全体に対するスタイルを html と body のどちらに指定すべきかは、本来プロパティごとに個々に考慮すべきですが、少なくとも以下の注意点があります。
remのように、ルート要素を基準とした単位color-schemeやscroll-behaviorのように、意図どおりのスタイルを適用させるためにはルート要素に指定しなければならないプロパティ<head>要素内のデータを画面に表示した場合への考慮
前述のように昔は html への指定を認識しないブラウザがあったため、消極的な理由により body への指定が安パイとされていたのですが、rem 単位が登場しだした頃からは逆に html に寄せた方がなにかと都合が良い状況になってきました。
/* 2000年代中盤以降の CSS の書き方 */
html {
background-color: black;
color: white;
/* and more properties */
}これはアクセシビリティの観点からも優れた手法といえるでしょう。Netscape Navigator 4.x 系対応のために body に背景色と文字色指定をした場合、背景色は html に伝播されるものの、文字色は伝播されませんから、事実上以下と同義になります。
html {
background-color: black;
}
body {
color: white;
}そのうえでもしユーザースタイルシートで
head,
meta {
display: block flow;
}
meta[name][content]::after {
content: attr(name) ':' attr(content);
}などと設定されたら、ページの最上部に表示されるメタ情報には background-color: black のみが適用され、（ブラウザの配色設定がデフォルトの場合は）背景色と文字色がどちらも黒色となり文字がまったく読めなくなってしまうからです。
そのため本ブログでもページ全体に対するスタイル指定は長らく html に寄せていたのですが、先日 iPad にインストールした Vivaldi で閲覧したところとんでもない表示になっている(fedibird.com)ことに気付いた次第です。あとで調べたところ、iOS 版 Vivaldi の強制ダークテーマは以下の場合に背景色を薄い灰色で描画し、一方で文字色はダークテーマが採用されて白くなるため、結果としてコントラスト比が著しく低い表示になってしまうことが分かりました。
- 背景を一切指定していない場合
- 背景をルート要素に指定している場合
「iOS 版 Vivaldi の強制ダークテーマを有効にしている場合」というエッジケースのみでの話ではあるものの、まさか令和になって「html にスタイル指定したことで起こるバグ」にふたたび遭遇するとは想定外で、驚きよりも懐かしさがこみ上げてしまった次第です。よくぞ帰ってきた。いや帰ってこなくて良い。
本ブログの対応としては background-color の指定を body に移動したうえで、前述のように <head> 内要素をユーザースタイルシートで表示させるユーザーへのアクセシビリティ確保のために以下のような工夫を行いました。
/* 本ブログの制作者スタイルシート <https://github.com/SaekiTominaga/blog.w0s.jp/blob/main/frontend/style/foundation/_elements.css> */
:root {
color: ...;
/* and more properties */
}
head /* for iOS Vialdi 7.7 (Force a dark theme on all websites) */,
body {
background-color: ...;
color: inherit;
}要点は以下の4つです。
colorは:rootに指定する（<head>内要素をユーザースタイルシートで表示させるユーザーへのアクセシビリティ確保のため）background-colorはbodyに指定する（iOS Vialdi 7.7 で正常に表示させるため、また CSS 仕様でそのように推奨されているため）background-colorの指定はbodyだけでなくheadにも同様に指定する（iOS Vialdi 7.7 で正常に表示させるため）headとbodyにはcolor: inheritも記述（なくても表示上の問題はないが、ルート要素の指定を継承させる意図をより明確に示すため）
ただ困るのは背景を一切指定していないサイトですよね。今どきの実サイトではそういったケースはあまりないと思うのですが、ちょっとした検証ページなどでは普通にあり得る話です。
また世界最初の Web サイト(info.cern.ch)が正常に表示できない状況になっているのも悲しい事実です。Web は後方互換性を重視したシステムであることは今さら言うまでもないことですが、30年以上前に作られたこのシンプルなページが2026年の最新のブラウザでも問題なく表示できることはエンジニアとして心の支えになっていることでもあります。この先どんなに Web が進化しようとも、このページは永遠に壊れることがあってはなりません。
info.cern.ch を iOS 版 Vivaldi（強制ダークテーマ適用）で表示した様子
オリジナル画像
そういった意味からも、Vivaldi には早急にこのバグを修正して欲しいと思います（※すでにバグレポートは提出済みです）。
そのうえで、Web 制作者は Vivaldi に限らず各ブラウザの強制ダークモードでの表示確認や、そもそもの話としてページ全体に対する配色指定は color と background-color をセットで指定するといった CSS の基本をあらためて振り返るタイミングに来ていると思います。2024年に Edge にページカラー設定が登場したとき、その紹介記事にてどんなサイトでもユーザーが任意に設定できるようになる流れ
が来ると書いたのですが、実際に今や多くのブラウザで実装が行われました。
これまでもユーザースタイルシートや代替スタイルシート
による切り替え機構によってユーザーがカラーテーマを選択する技術は存在したものの、ある程度のリテラシーが求められたり、機能を搭載しないブラウザが存在したりしたこともあってか一般にはまったくといってよいほど浸透していませんでした。強制ダークモードが今後どの程度ユーザーに認知、利用されるようになるかは分かりませんが、従来のマニアックな技術と比べれば圧倒的に普及の可能性はありそうで、「Web はユーザーがカスタマイズするもの」という根源的な観点がより現実になる期待もしています。
Web における色の最終決定権は誰にあるのか、それは間違いなくユーザーであるべきです。
脚注
-
1.
たとえば
href属性のない<a>要素の文字色がダークモードで青くなる現象
が見られます。
↩ 戻る