ダークモード

この項目では、一般的な技術情報について説明しています。ウィキペディアのダークモードの情報については「en:Wikipedia:Dark mode」をご覧ください。

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

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

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

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

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

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

Microsoftは2016年、Windows 10のアニバーサリ・アップデート（英語版）としてダークモードを導入^[9]、モバイル版では2018年に Apple が追従し macOS Mojave に採用した^[10]。翌2019年9月、iOS 13 と Android 10 （英語）の両方にも展開した^[11][12]。

ブラウザではFirefox も Chromium も内部画面すべてにオプションとしてダークテーマを用意しており、サードパーティの開発者は独自のダークテーマを実装可能^[13][14]。

フロントエンドのウェブ開発者（英語版）対応の「カラー表示を選択」は2019年にオプションとして登場し、ユーザーはシステムのテーマを好みで明色または暗色にでき、CSS プロパティがその選択を知らせる^[15]。

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

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

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

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

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

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

以下は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 の例を示す^[24]。

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

表 話 編 歴 色彩
色彩科学	色の物理学 電磁スペクトル 可視光 スペクトル色 構造色 発色団 カラリメトリー 分光強度分布（英語版） 色覚 色覚 色覚異常 条件等色 色順応 色の恒常性 色温度 反対色過程 ユニーク色相 色彩心理学 ナショナルカラー 色再現 色域 ホワイトバランス デジタル画像処理 カラーマネージメントシステム 色空間 アルファブレンド
基礎的概念	色彩理論（英語版） 配色 補色 暖色 寒色 加法混合 減法混合 色名 原色 純色 有彩色 無彩色 二次色 三次色（英語版） 中間色
色の三属性	色相 彩度 明度
色名	基礎的な色 白 黒 赤 緑 青 シアン/藍 マゼンタ/紅 黄 代表的な二次色 紫色 碧色 橙色 褐色 灰色
分野	印刷 網点 CMYK 特色（スポットカラー） コンピューター 色深度 ウェブカラー X11の色名称
研究者	ゲーテ ルンゲ ドルトン ヤング プルキンエ シュヴルール グラスマン E.W.V.ブリュッケ（英語版） ヘルムホルツ マクスウェル ヘリング ベツォルト マッハ アブニー オストヴァルト マンセル ゴールドシュタイン（英語版） グラニト スヴァエティチン ライト マクアダム ジャッド ヴィゼッキー クリース ジェイムソン ハーヴィッチ ニッカーソン 稲村 印東 納谷
表色系(色空間)	混色系 CIE XYZ CIE RGB CIE Lab CIE Luv CIE Yuv CIE UVW CIECAM02（英語版） オストワルト表色系 Rec. 2020 RGB YUV 顕色系 HSV HSL マンセル表色系 NCS PCCS その他 LMS色空間 色の見えモデル
色彩の組織	パントン 国際照明委員会 国際色彩学会 国際カラーコンソーシアム 日本色彩学会 日本色彩研究所 日本流行色協会 日本カラーデザイン研究所
関連項目	色名一覧 色立体 カラーチャート グレースケール ブラック・アンド・ホワイト 蛍光色 言語による青と緑の違い（英語版） 緑#緑をさす「青」 グルーのパラドックス 色彩調和論 色素 透明 無色 日本の色の一覧 日本の伝統色 パステルカラー バルール パレット パーソナルカラー ヒトの髪の色 ヒトの虹彩の色 ヒトの肌の色 不可能な色 虹色 二色旗 三色旗 対比効果 プルキンエ現象 アブニー効果 ヘルムホルツ・コールラウシュ効果（英語版） ベツォルト・ブリュッケ現象（英語版） ハント効果（英語版）