ダークモード

GNOMEのダークモード

同一の画面の表示をノーマルにした場合（左）と、ダークモード（右）

ダークモード表示（ダークモードひょうじ 英語: dark mode）とはページ表示の配色の設定の1種。背景を濃色、それよりも薄い色で文字列やアイコン、利用者向けの画像要素を表示させることを指し、しばしばコンピュータ上のユーザインタフェースならびにウェブデザインなどの設計要素の観点から議論される。最近のウェブサイトやオペレーティングシステムの多くはオプションを提供し、暗色背景に明色で画面の要素を表示する方法を選択できる。配色の明暗逆転ともいう（英: light-on-dark color scheme、dark theme、night mode、black mode、lights-out (mode)）。

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

開発史

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

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

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

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

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

Microsoftは2016年、Windows 10のアニバーサリ・アップデートとしてダークモードを導入、モバイル版では2018年に Apple が追従し macOS Mojave に採用した。翌2019年9月、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();
}

参考文献

主な執筆者、編者の順。

• 梶川浩太郎、岡本隆之、高原淳一、岡本晃一「2. プラズモニックモードの結合 §2.1.4 表面プラズモン誘起透明化」『アクティブ・プラズモニクス』コロナ社、2013年5月、18頁。 
• さくしま たかえ「簡単＆快適 Windows10：第1回 画面を好みの配色にする」『日経パソコン』第827巻、日経BP、2019年10月14日、50-53頁、CRID 1520290882157712768、ISSN 0287-9506。 掲載誌別題『Nikkei personal computing』。
• Mana「6-11 ダークモードに対応させる」『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』SBクリエイティブ、2021年3月。 ISBN 978-4-8156-0614-5
• 宮田 将司、廣畑 純平、高原 淳一「連結プラズモンアンテナを用いた可視光領域におけるブライト・ダークモード結合」『応用物理学会学術講演会講演予稿集』第2014.2巻、公益社団法人 応用物理学会、2014年9月1日、919-919頁、CRID 1390296420726907776、doi:10.11470/jsapmeeting.2014.2.0_919、ISSN 2436-7613。 

関連項目

読みの順。

• AMOLED
• OLED
• Solarized (配色)
• Night Shift (ソフトウェア)
• Blackle