ダークモードとは何か、どこで使われているかを調べ直してみた

### はじめに

最近、ダークモード対応というニュースをよく目にします。僕も背景暗めの色にして、眩しくないディスプレイにするのが好きです。

ダークモードについてはなんとなく存在を知っているだけだったので、思い立ってちゃんと調べ直してみようと思い、まとめてみました。

## ダークモードについておさらい

### そもそもダークモードとは何か

厳密な定義は見つからなかったのですが、[Light-on-dark color scheme - Wikipedia](https://en.wikipedia.org/wiki/Light-on-dark_color_scheme) から引用します。

> Light-on-dark color scheme, also called Dark mode, Dark theme or Night mode, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background and is often discussed in terms of computer user interface design and web design.
>
> (意訳) Dark mode、Dark theme または Night mode とも呼ばれる Light-on-dark color scheme は、明るい色のテキスト、アイコン、および暗色系の背景上の GUI 要素を使用するカラースキームであり、主にコンピュータの UI デザインや Web デザインで話題に挙がるものである。

上記を簡単にまとめると、以下のようになるかと思います。確かに明文化してみると、「ダークモードってそういうやつだよね」と納得できると思います。

* 主にコンピュータの UI で用いられる
* 暗色系の背景、明色系のテキストやアイコンで UI を構成する

### ダークモードなカラースキームとは

カラースキームとはデザインを組む上での色の組み合わせのことですが、暗色系が背景、テキスト・アイコンが明色系のカラースキームは検索すればたくさんの種類が見つかりますよね。

エディタやターミナルのカラースキームとして、ダークモードっぽいカラースキームを利用されている方も多いのではないでしょうか。

個人的に好きなダークモードっぽいカラースキームを2つほど挙げてみました。他にもたくさんありますが、ダークモードっぽいカラースキームのイメージはつくと思います。

#### [onedark](https://atom.io/themes/one-dark-ui)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/dff13705-d274-c22a-fb2f-9466b798a0dd.png)

#### [dracula](https://draculatheme.com/)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/82714052-d855-71ef-adc7-bd300d626aed.png)


## ダークモードに対応しているOS・アプリケーション

ここからは、ダークモードに関連している OS・アプリケーションという観点で探してまとめてみました。

## OS

OSのレイヤでは、ダークモードにできる範囲が以下のように広範囲なので、ディスプレイの大部分を一気にダークモードにすることができます。

* 背景
* ステータスバー
* アプリケーションのウインドウ枠

### Mac OS X

[Mojave からダークモードがサポート](https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface)されましたね。

![image.jpg](https://images.idgesg.net/images/article/2018/06/macos-mojave-dark-mode-desktop-100761941-large.jpg)
(画像引用元：https://www.macworld.com/article/3283342/os-x/article.html)

### Windows

[Windows 10 October 2018 Updateからサポート](https://www.cnet.com/how-to/how-to-enable-dark-mode-in-windows-10-october-2018-update/)されたようです。

![image.jpg](https://www.windowscentral.com/sites/wpcentral.com/files/styles/xlarge/public/field/image/2018/08/file-explorer-dark-mode-official.jpg)
(画像引用元：https://www.windowscentral.com/closer-look-file-explorers-new-dark-mode-windows-10)

### Linux

Linux は OS 自体のテーマをカスタマイズできるので、好みのダークモードなテーマを適用することができます。

[ダークモードなテーマについてのまとめ](https://www.addictivetips.com/ubuntu-linux-tips/best-dark-themes-for-linux-in-2018/) がありましたのでご参考までに。

![image.jpg](https://cloud.addictivetips.com/wp-content/uploads/2018/05/kisskool-red.png)
(画像引用元：https://www.addictivetips.com/ubuntu-linux-tips/best-dark-themes-for-linux-in-2018/attachment/kisskool-red/)

## アプリケーション

次はアプリケーションです。OSとは違い、アプリケーションウインドウがダークモードの範囲内となりますが、探してみるとダークモード対応している箇所がいくつもありました。

### Webブラウザ

情報収集や Webアプリケーション開発で触れる機会の多い Web ブラウザ。整理してみると、ダークモードにできる箇所はいくつかあるようです。

#### Web ブラウザ自体のテーマ

Web ブラウザのアドレスバーは、テーマを変更することができますよね。
検索すればたくさんダークモードなテーマが見つかると思います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/fd9366f8-5446-90f8-b332-059a549f3afc.png)
(画像引用元：https://chrome.google.com/webstore/detail/material-simple-dark-grey/ookepigabmicjpgfnmncjiplegcacdbm)

#### Developer Tool

Google Chrome や Firefox であれば、Developer Tool をダークモードなテーマにすることができます。

##### Google Chrome Developer Tool

[方法はこちら](https://developers.google.com/web/tools/chrome-devtools/ui#dark-theme)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/dda3dbe8-338e-d88a-ea62-69b70f303dd9.png)


##### Firefox Developer Tool

[方法はこちら](https://developer.mozilla.org/ja/docs/Tools/Settings#Opening_Settings)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/0e843c3e-cf54-e684-f50e-d9573f27346f.png)

#### Web サイト

Web ブラウザ自体ではなく、YouTube や Twitter などでは、Web サービス内の設定変更でダークモードのテーマを利用することができます。

##### YouTube

[方法はこちら](https://support.google.com/youtube/answer/7385323?co=GENIE.Platform%3DDesktop&hl=en)

![](https://boygeniusreport.files.wordpress.com/2017/04/youtube-dark-mode.jpg)
(画像引用元：https://bgr.com/2017/05/03/youtube-dark-mode-setting-material-design/)


##### Twitter

[方法はこちら](https://techcrunch.com/2017/09/06/twitter-brings-its-dark-night-mode-theme-to-the-web/)

![image.png](https://cdn.vox-cdn.com/thumbor/XTiKGLpTDyDWlkQCQzIA41TOuaQ=/0x0:1440x798/1820x1213/filters:focal(203x276:433x506):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/56546883/Screen_Shot_2017_09_06_at_3.38.22_PM.0.png)
(画像引用元：https://www.theverge.com/2017/9/6/16263416/twitter-night-mode-desktop-roll-out-moon-icon)

##### Reddit

[方法はこちら](https://www.reddit.com/r/help/comments/9zh1ac/night_mode/)

![image.jpg](https://i.redd.it/cjeiptbf22711.png)
(画像引用元：https://www.reddit.com/r/hackintosh_ja/comments/8uz0q0/reddit%E3%82%82%E3%83%80%E3%83%BC%E3%82%AF%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AB%E5%AF%BE%E5%BF%9C/)

##### dev.to

dev.to はβ版という扱いのようです。こちらは記事にまとめてみました。

[dev.to が β 版ダークモード(Night Mode)を公開し始めたようだ](https://qiita.com/gotchane/items/90f93a4ecc199d4db99b)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/9a1f9777-050c-bcb1-d189-abf9922036c8.png)

#### ダークモード対応していない Web サイトには Chrome 拡張機能で

ダークモードがない Web サイトでも、よしなにダークモードにしてくれる chrome 拡張機能があります。

* [stylish](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe): カスタム CSS を適用することでダークモードに
* [Dark Reader](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=ja): 指定した URL に対し、自動でダークモードにしてくれる
* [nighteye](https://chrome.google.com/webstore/detail/night-eye-dark-mode-on-an/alncdjedloppbablonallfbkeiknmkdi): 有料。設定を On にしてあればいい感じにダークモードにしてくれる

### Markdown エディタ

自分の好きな開発用のエディタには、何かしらカラースキームを適用されると思います。

その他にも、Markdown エディタにもダークモードなカラースキームを適用できるものがあります。

#### [boostnote](https://medium.com/boostnote/boostnote-color-themes-c53cb8e23698)

![image.png](https://cdn-images-1.medium.com/max/1600/1*5G_Pw5B3L91PkPw8niGlDA.png)

(画像引用元：https://medium.com/boostnote/boostnote-color-themes-c53cb8e23698)

#### [Quiver](https://github.com/HappenApps/Quiver/wiki/Themes)

![image.png](https://raw.githubusercontent.com/philmtd/Quiver-Orange-Dark-Theme/master/quiver-orange-dark.png)
(画像引用元：https://github.com/HappenApps/Quiver/wiki/Themes)

#### [Inkdrop](https://inkdrop.app/features#beauty)

![image.png](https://inkdrop.app/features/ui-theme-dark-macos.png)
(画像引用元：https://inkdrop.app/features#beauty)

## ダークモードについてもっと探す

[Dark Mode List](https://darkmodelist.com) というサイトがあります。 

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/4a6bf9b5-a060-accb-8d80-6977e0d1a613.png)

掲載されているのは Web サービスやソフトウェアなど様々ですが、ダークモード対応されている対象を見つけるのに役立つかも知れません。

## 終わりに

ダークモードは、OS、Markdown エディタ、Webサービスと様々なところに派生し、使われていることがわかりました。

他にもダークモード対応されているところがあると思うので、探して見つけ次第追記しようと思います。もしご存知でしたら教えてください！