Help us understand the problem. What is going on with this article?

android の Google Chrome のダークモード化でつまずいた

2019/09/22 追記
android 版 Google Chrome がデフォルトで UI をダークモードにすることができるようになりました。この記事で紹介する方法を使わずに

Chrome のメニュー(画面右上の丸が縦に3つ並んだマーク)> 設定 >
基本設定 > テーマ > 暗

で UI をダークテーマにすることができます。ただし、表示するページをダークにするには、まだ本記事の方法を使う必要があります。

2019/10/30 追記
Google Chrome のアップデートにより、WEB ページをダークにする試験機能の提供が終了しました。ストレージの残量不足で最近アプリを更新できていなかったので、いつ提供終了になったかは分かりませんが、少なくともバージョン 78.0.3904.62 では提供が終了しています。引き続き、UI は上記の追記の方法によりダークにすることができます。

2019/11/02 追記
↑「WEB ページをダークにする試験機能の提供が終了しました。」と書きましたが、実際には名称が変更されただけでした。「Force Dark Mode for Web Contents」という名前になっています。また、いくつかのパターンから選べるようになりました。

ダークモードについて

先日、Youtube で iOS 13 がダークモードに対応するという動画を見ました。android でダークモードに対応しているアプリを調べていた際、ふと、Chrome をダークモードにできるのかが気になりました。

ちなみに PC の Chrome は、Chrome ウェブストアでテーマをダウンロードすればダークモードにできます。また、正式にダークモードをサポートしている Google の android 向けアプリには以下のようなものがあります(実際には他にもたくさんあります)。

  • keep
  • カレンダー
  • 時計
  • 連絡帳
  • Youtube
  • Google 日本語入力

ダークモードにする利点としては、

  • かっこいい
  • バッテリーを節約できる(特に有機 EL ディスプレイ搭載端末)
  • 目に優しい(?)

などがあります。

android 版 Chrome をダークにする

注意 この記事で紹介する方法は開発途中の機能を有効にするものです。android 版 Chrome のダークモードは、まだ正式な機能ではありません(2019/09/22追記 UI のダークモードは正式な機能になりました。)。また、画像はandroid タブレットのものであり、スマートフォンでは画面やボタンの配置等が異なる可能性があります。

まず、Chrome を開き、検索窓に

chrome://flags

と入力します。

すると、開発途中の機能の有効・無効を切り替えるメニューが表示されます。
IMG_20190621_021225_672.jpg
ページ内検索か、画面上部の Search flags に

dark mode

と入力します。

Android Chrome UI dark mode という項目の Default を Enabled にします。UI だけでなくウェブサイトの表示もダークにしたい場合は、近くにある Android web contents dark mode に対しても同じ操作をします。

ここで、Chrome の再起動を求められるので再起動します。再起動後、ウェブサイトの表示は、先程設定を変えたならダークになりますが、UI には、もうひと手間必要です。

Chrome のメニュー(画面右上の丸が縦に3つ並んだマーク)を開き、
設定 > 基本設定 > テーマ で「暗」を選択します。

設定に「テーマ」が表示されない

ネットを見ていると上記の方法でできるはずなのですが、私の場合は「設定」に「テーマ」が表示されませんでした。しばらく考えた結果、chrome://flags にテーマ変更の項目を通常の設定に表示する設定があると考えました。

すると、やはりありました。

chrome://flags でページ内検索で

site settings

と入力、Android Site Settings UI changes. を Enabled にし、Chrome を再起動すると、
設定 > 基本設定
に「テーマ」という項目が追加されているはずです。

結果

Chrome の UI とウェブサイトの表示の両方をダークモードにすると、下の画像のようになります(画像は Qiita のトップページ)。ウェブサイトの画像の色は基本的には問題ありませんが、ものによっては色が反転してしまいます。気になる場合、ダークモードにするのは UI のみにしましょう。(Qiita は、ほぼ全ての画像の色が反転してしまいます。)

また、ウェブサイトの表示をダークにしても、元々ダークなページはほとんど変わらない、または全く変わりません。
Screenshot_2019-06-21-02-43-31.png
chrome://flags は下のようになります。
Screenshot_2019-06-21-02-52-45.png
漆黒のウェブサイトになりますね。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away