ダークモード

サムネイル|GNOMEのダークモード サムネイル|同一の画面の表示をノーマルにした場合（左）と、ダークモード（右） ダークモード表示（ダークモードひょうじ ）とはページ表示の配色の設定の1種。背景を濃色、それよりも薄い色で文字列やアイコン、を表示させることを指し、しばしばコンピュータ上のユーザインタフェースならびにウェブデザインなどの設計要素の観点から議論される。最近のウェブサイトやオペレーティングシステムの多くはオプションを提供し、暗色背景に明色で画面の要素を表示する方法を選択できる。配色の明暗逆転ともいう（）。

利用者には、目の疲れを軽減できるからと、この表示モードに変える人もいる。電力消費量を比べた場合、2016年版の Google PixelはディスプレーにOLED（有機エレクトロルミネッセンス）を採用しており、白色を最も明るく設定すると、黒色100％表示よりもエネルギーをおよそ6倍使うことになる。そうは言っても、節電効果を従来型のLEDディスプレーには期待できない学士論文。最近の OSは、画面表示の選択肢にダークモードを採用する。

歴史 サムネイル|1980年代のビデオゲーム「ゾーク」の見た目。CRT画面の黒バックに文字は緑色。

黎明期 現代のコンピュータ画面の前身であるブラウン管オシログラフやオシロスコープなど、黒い背景に画像や他のコンテンツを光る軌跡としてプロットし表示した。

コンピュータ画面の導入当初、ユーザー・インターフェイスの形成は旧来の表示装置にならい、陰極線管（CRT）の採用を前提とした。モノクロ画面上に塗った蛍光体は、通常の状態では非常に暗い色をしていて、電子ビームが当たると黒い背景に明るく点灯し、採用したに応じて白や緑、青または琥珀色に見える。RGBスクリーンの動作も同様であり、ビームをすべて「オン」にすると白色を呈する。

文字多重放送が出現すると、新しい媒体に最適の原色と二次光器、その組み合わせが研究された。パレットには黒と赤、緑と黄、青とマゼンタ、シアンと白があり、一般に黒地にシアンまたは黄色が最適と判明した。

逆のカラーセット、つまり明色の背景に暗色の組み合わせは、本来はWYSIWYG方式のワープロ向けの技術であり、紙にインクで出力した場合の色味を試す目的で標準化していた。

「ダークモード」の広がり WYSIWYGによって「白地に黒文字」が画面表示の標準となっていく中、Appleは1991年のMacOS System 7で「CloseView」という反転した配色に対応した。またMicrosoftはWindows 95で画面デザインの配色「ハイコントラスト」設定を導入した。どちらも当時は視覚障がいのあるユーザーに向けた補助的な機能としてであり、ダークモードといった標準的な機能としてではなかった。

2016年、Windows 10のとしてダークモードが導入、2018年には Apple が追従し、 macOS Mojave に採用した。翌2019年9月、スマートフォン用のOSであるiOS 13 と Android 10 の両方にも展開した。

ブラウザではFirefox も Chromium も内部画面すべてにオプションとしてダークテーマを用意しており、サードパーティの開発者は独自のダークテーマを実装可能となっている。対応の「カラー表示を選択」は2019年にオプションとして登場し、ユーザーはシステムのテーマを好みで明色または暗色にでき、CSS プロパティがその選択を知らせる。

近年ではスマートフォンでダークモードを常用するユーザーが多数派との調査結果もあり、利用者は多い。

エネルギーの消費量 暗色の背景に明色で表示するスキームは、OLEDディスプレイに表示するとき消費エネルギーが少なくて済む。バッテリ寿命にはプラスの影響を与え、エネルギーを節約する。

OLED で黒色主体の画像を表示する場合、消費電力は LCD と比べると約 40% にとどまる代わり、文書やウェブサイトなど白い背景に置いた画像の表示には、3倍超の電力を使う場合がある。それさえ配慮するなら、バッテリ寿命とエネルギー使用量を抑制できる可能性はあり、また長期的に電力使用量を削ると、バッテリの寿命やディスプレイとバッテリの耐用年数も延ばせる場合がある。

明色の背景に暗色で表示するスキームでエネルギーを節約するには、OLED 画面の機構に依存し、光の生成はサブピクセル単位で個別に実行すること、電力消費は光の生成時点に限定して発生する。LCD ではその動作は対照的で、サブピクセルは常時オン（点灯）であり、LED バックライトの光を遮断または通過している。

黒色の代わりにダークグレーを採用するものと比べると、明暗色スキームでも平均輝度に比例して消費電力が減少する「AMOLED ブラック」画面は純粋な黒色を用いてダークグレーを使わないが、エネルギー節約に優れているとは限らない。AMOLED の黒色は省エネの面ではダークグレーで置き換えるよりも確かに効率が良いが、多くの場合、その幅は無視できる程度にすぎない。たとえば、Google の公式 Android アプリのダークテーマが採用するダークグレーと比較して、AMOLED の黒の省エネ率は 1% 未満。Google は2018年11月に Android のダークモードがバッテリ寿命を延ばすと公式に認めた。

ウェブ環境との相性 人によっては暗い背景に明るい文字という配色の方が、全体の明度が低いから目が疲れにくく、画面も読みやすいと主張する。あるいは別の人は、反対の主張をする。注意点はウェブ上のほとんどのページは白い背景を前提として設計されており、GIF および PNG 画像がアルファブレンドの代わりに透明ビットを採用する場合、傾向として輪郭の表示が切れぎれで、他の描画要素にも問題が発生しがちである。

CSSには画面表示の機能として「prefers-color-scheme」が用意され、ユーザーが要求した配色は明るい方式か暗い方式か検出し、希望された配色を提供する。ユーザーはオペレーティング・システムの設定で指定するか、もしくはユーザーエージェントを採用して指定できる。

以下はCSS の記述の例である。@media (prefers-color-scheme: dark) { body { color: #ccc; background: #222;

<span style="background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);"></span>JavaScript の例を示す。if (window.matchMedia('(prefers-color-scheme: dark)').matches) { dark(); }

参考文献 主な執筆者、編者の順。

掲載誌別題『Nikkei personal computing』。

脚注

注釈

出典

関連項目 読みの順。

OLED

Blackle