ひとりごと

文章の練習と自分のアウトプットのために書いていく日記です。

Webの Dark Mode 対応について考えてみた

はじめに

Webの Dark Mode 対応のデファクトを知りたくて少し調べてみました。デファクトはこうだ！と提示するというより、個人的な考察を記載したものになります。デファクトはこうやで、というのがあるなら知りたいなぁという感じです。

Dark Mode とは

（たぶん）みんな大好き、黒を基調とした画面表示モードのことです。Windows OS、Mac OS、iOS、Android OS など主要OSがDarkModeに対応してきています。OSの設定を変更すると、デスクトップやOS標準アプリ、サードパーティアプリも Dark Mode に切り替わる対応がされてきているようです。ユーザーに身近な機能になりつつあると言われています。

私は、ターミナルやIDEはエンジニアっぽくてかっこいいという理由で黒ベースのテーマを設定していますが、一般的にも人気なんですかね？よくわからん。そういうのどっか調査してるんでしょうか。どうやって調べたらいんやーという気持ちです。

Dark Mode のメリット

Dark Mode のメリットは以下2点が挙げられているのをよく見かけました。

  • 目に優しい（暗いところで閲覧する際、見やすくなる）
  • 有機ELを採用するデバイスでは、消費電力が減ってバッテリーが長持ちする

あと、個人的には カッコイイ ってのもあるよね、と思っています。

参考：japanese.engadget.com

Webの現状は？

Dark Mode に対応しているサイト、サービスは少ない印象を受けますが、どうなんでしょう？Dark Mode 対応していると言われるサービス（Twitter、YouTubeなど）でも、OSの設定に応じて変更するものではなく、サービス内で Mode を切り替えられるような設定を設けているというのが現状のようでした。

Blogだと、OSの設定に対応しているものもいくつか見かけました。いずれにせよ、網羅的に調査できているわけではないので、みんなどういう認識なんだろうってのが気になっています。

Webはどうしていくべきなのか？

Webはどうしていくべきなのか？OSの設定によってテーマを切り替える実装を入れるべきなのか？という話ですが、 OSやネイティブアプリは Dark Modeに対応しているのに、Webだけ対応していないとDark Modeのメリットが弱まる為、やはり対応していくのがBetterだろうと私は思います。

Chromeでは強制的に Dark Mode にする設定が試験的に実装されているようで、そういったことからもWebサイトやWebサービスが未対応なことが課題となっており、これから対応していくべきだという声が一定数挙がっていることが伺えるなと感じました。（ちなみに、Chromeで chrome://flags を開き、「Force Dark Mode for Web Contents」 を 「Enabled」 にすると強制的にDarkModeになります。）

Webでの対応方法

さて、Webでの対応方法の話ですが、OSの設定に応じてスタイルを変更する為のCSS のメディア特性があるので簡単に対応できます。prefers-color-scheme を使います。仕様はこちら。 Can I useをみたところ、モダンなブラウザでは使えると思って良さそうです。

以下、サンプルです。（少し前のMDNのサンプルベースに書きましたが、今は変わったみたい。）

サンプル

html

<div class="themed">Theme</div>

css

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

これをさらにCSS変数（カスタムプロパティ）を使って管理しやすくすると以下のようになります。

css

* {
  --background: black;
  --color: white;
}

@media (prefers-color-scheme: light) {
  *{
    --background: white;
    --color: black;
  }
}

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: var(--background);
  color: var(--color);
}

疑問

ここでいくつか疑問が浮かびました。

疑問その１：サイト、サービス、アプリによっては OSの設定と違うMode にしたいものもあるのでは？

OSの設定によって、一律 Light Mode、Dark Mode に切り替えられると不都合な場面もあるのではないか、と思いました。私の場合、アプリによってはこれは Dark Mode で使いたい、これは Light Mode の方がみやすいから Light Mode で使いたいと思うことが実際にあったからです。その観点から考えると、OSの設定によって切り替えるように対応されたとしても、サイト、サービス、アプリごとにユーザーが設定できる機能は残した方が良いように思いました。

今の所、YouTube や Twitter は OS の設定は見ておらず、ユーザーに設定させたMode (テーマ) を適用しているのはこの辺を考慮してのことなのかな？という気もしました。（真相は知らない。。）

Macのアプリだとアプリ側の設定も設けているものもあるようです。やはり同じようなことを思う人いるよな、やっぱり必要だよな、というのが個人的な結論です。

参考：support.apple.com

疑問その２：暗いところで見るときに Dark Mode にしたいなら、明るいところで見るときは Linte Mode にしたいのではないか？

暗いところで見るときに Dark Mode にしたいなら、明るいところで見るときは Linte Mode にし たいのではないか？というのも自然と浮かぶ疑問だと思います。

その度にOSの設定を切り替えるのか？というとそれは現実的ではない印象を受けます。それよりディスプレイの明るさを調整した方が操作のステップも少なくて手軽なので私ならそうします。

OSによっては、時間帯によって明るさを自動調整できる設定や、Lite Mode or Dark Mode を切り替える設定があるのでそれを使うのもよさそうですね。

でもここでまた疑問が出てきます。この機能って 時間帯 で切り替えているので、そもそも日中は明るい、夜は暗いが前提になっていますよね。でもそうではないときって日常的にあります。それだとニーズに合わない。本当の理想を考えると、ユーザーの利用環境の明るさによって自動で切り替わるとういうのがユーザー体験として一番ベストなのでは...？

AmbientLightSensor

ユーザーの利用環境の明るさによって自動で切り替わるとういうのがユーザー体験として一番ベストなのでは...？ この視点で、ユーザーの利用環境の明るさをWebで取得し、Dark Mode 対応をするという記事を先日のng-japan OnAirを視聴している中で知りました。

その記事がこちら↓です。
dev.to

ここでは、 AmbientLightSensor が紹介されています。 まだちゃんと触れていなくてざっくりになりますが、簡単に紹介します。

できること

制約

  • 現状の対応ブラウザが限られている
    • Can I use
    • chromeは対応しているが、デフォルトではないので設定が必要（chrome://flags/#enable-generic-sensor-extra-classes）
  • 環境光センサーをもつデバイスでしか使用できない
  • 他にもユーザーが使用を許可していなければ使えないなどの制約もあるみたい

まとめ

実は今回、この記事を知って、そこからWebの Dark Mode 対応事情を調べてみようと思ったのでした。

今のところ、prefers-color-scheme を使った対応 + 各サイト、サービスで Mode 切り替え設定実装 とういうのがベストな落としどころなんじゃないかなーというのが個人的な感想です。 （これはかなり凝った場合だと思うので、どこまでそこにこだわるのか？という話はあると思います。）

AmbientLightSensor に関しては触ってもうちょっと理解したいなという気持ちがあるので、触ったらまたブログを書く予定です。