当サイトがダークモードに対応しました。デバイスをダークモードに設定していただくだけで、当サイトもダークモードが反映されます。是非設定してこちらの記事をご覧ください。

この記事では当サイトがダークテーマを実装するに至った背景や、開発時に意識したダークテーマの仕様をまとめます。

ダークモード実装の背景

ここ最近、ダークモードに対応しているWebサイト・スマートフォンアプリをよく見かけると思います。2019年にリリースされたiOSがOSレベルでのダークモードに対応しましたが、近年ダークモードの重要視されつつあります。

色々なアプリがダークモードに対応することによって、主に以下の2つの利点が期待できます。

  1. 周囲が暗い環境でも見やすい画面となる
  2. 有機ELディスプレイを採用しているデバイスでは消費電力軽減に貢献できる

次からはこれらの利点を掘り下げてみます。

1. 周囲が暗い環境でも見やすい画面となる

ダークモードに対応することで、周囲が暗い環境でも見やすい画面となります。具体的には、周囲とディスプレイ間の明るさのコントラストを減らすことで、ユーザーにとって見やすい画面を目指すことができます。カーナビが車のライトをつけると黒背景になるのもこれが理由です。

ディスプレイを見続けるのは知らぬうちに眼や脳を疲れさせるものです。暗い環境下で白背景のアプリを閲覧した場合は尚更です。例え暗い環境下でも見やすいデザインを目指すならば、ダークモードへの対応は欠かせないものでしょう。

2. 有機ELディスプレイを採用しているデバイスでは消費電力軽減に貢献できる

iPhoneではiPhone X以上のほとんどが、Androidスマホでもいくつかのモデルが有機ELディスプレイを採用しています。

有機ELディスプレイの特徴は、ディスプレイの素子（ピクセル）ひとつひとつが発光していることです。これに対し液晶ディスプレイは、ディスプレイの後ろでバックライトが光っており、素子はその光を調節して画面を構成します。

上記のような性質があるため、ダークモードのような画面全体が暗いデザインは、有機ELディスプレイの素子の発光を抑えることができるます。結果として消費電力低減に貢献します。なお、液晶ディスプレイの場合は画面全体が暗くてもバックライトは依然として発光しているため、ダークモードによる消費電力低減は望めません。

当サイトが実装したダークモードの仕様

サイト トップ画面 ダークモード イメージ

当サイトもダークモードに対応しましたが、ダークモード実装にあたり仕様として検討したことをここにまとめます。

ダークモード時は周囲が暗い環境でも見やすいデザインにする

こちらはダークモード実装の目的そのものなので、特筆すべきことはありません。

サイトではなく、デバイスの設定に依存する

ダークモード 切り替え イメージ

当サイトのダークテーマは、デバイスの設定に依存しています。そのため、ダークモードへ切り替えるには、ユーザーデバイス内の設定で切り替える必要があります。必然的にデバイスがダークモード設定に対応してない場合は、当サイトをダークモードで閲覧することはできません。

開発をする際、デバイスレベルではなくアプリレベルでダークモードの切り替えを可能にすることも検討しました。しかしながら、アプリレベルでのダークモード切り替えには以下のような不都合がありました。

特に最初の「アプリ内よりもユーザーデバイスのUIによるダークモード切り替えの方がユーザーが操作に慣れていると考えられること」がダークモードをデバイスレベルで依存させることを決定づけました。ダークモード切り替え操作に最も適したUIを考えた結果、ユーザーデバイスのダークモード設定に依存させるのが最適であると考えました。

最後に

サイトのダークモード開発自体は1日で終わりました。技術的な話をすれば、実装にはCSSのprefers-color-schemeにより、ユーザーがシステムに要求したカラーテーマを検出しています。カラーテーマがdarkの時だけ、普段のスタイル（ライトテーマ）のCSSクラスを上書きすることでダークテーマを実現しました。

完成して、「ダークモードもいつもと違ってかっこいいな…」とか自分で思ってしまいました。テキストエディタを使う時もYouTubeを使う時も黒背景だったせいか、自分はダークモードのような黒背景が好きみたいです。

開発自体そこまで負担がかからないものでしたので、Web開発者の方には是非実装してほしいと、個人的に思っています（笑）

この記事の 最終更新：2020.5.28