gladevise Logo
HomeAboutContact

OS,アプリ別ダークモード・ナイトモード設定方法まとめ


仕事を終えると目が疲れている。夜中にスマホを見てしまったら、眠れなくなってしまった。こんな時、ダークモードやナイトモードを設定しておくと、目に受ける光刺激を減らすことができ、目が疲れにくくなり、眠りやすくなります。

ダークモードとは画面の背景を黒、文字を白に近い配色にすることで、光を抑えた表示をするモードを差します。暗闇での画面の眩しさを軽減でき、普段から浴びる光の量も減らすことができます。

ナイトモードとは夜になるに従って、画面の輝度を落とし、色調を暖色系に変えるモードのことです。画面が赤く、暗くなっていくので、ブルーライトをカットすることができます。

現在、画面を暗くするモードはダークモードやナイトモード、夜間モードなどの言葉で表現されていて、アプリによって、提供する機能が異なっています。ここでは混乱を避けるため、ダークモードとは画面の背景を黒、文字を白に近い配色にすることを差すこととします。またナイト(夜間)モードとは夜になるに従って、画面の輝度を落とし、色調を暖色系に変えることを差すこととします。

OS別ダークモード・ナイトモード設定方法

WindowsやAndroidなどのOSごとにダークモードとナイトモードの設定方法を説明します。

Windows

Windows10では公式でダークモードとナイト(夜間)モードに対応しているので、特別なアプリを入れなくても利用できます。

Windowsダークモード設定方法

  1. 設定→個人用設定→色
    または検索ウィンドウに「色」と入力して、「色の設定」を選択する
  2. 「色を選択する」から黒を選択

スタートメニューから設定を選択する

個人用設定を選択する

色を選択する

色を選択するから「黒」を選択する

Windowsナイト(夜間)モード設定方法

  1. 設定→システム→ディスプレイから「夜間モードの設定」を選択する
    または検索ウィンドウに「夜間」と入力して、「夜間モード」を選択する
  2. 夜間モードのスケジュールをオンにする
  3. 強さで赤みの強さを変更できる
  4. 時間の設定から夜間モードをオンにする時間を設定できる

スタートメニューから設定を選択する

システムを選択する

夜間モードの設定を選択する

夜間モードのスケジュールをオンにし、強さと時間を設定する

Android

Androidではダークモードやナイトモードへの対応が乏しいため、公式でダークモードが利用できるデバイスが限られています。

Android 10からは公式でダークモードがサポートされています。

Androidダークモード設定方法

AndroidはAndroid 9 Pieの場合、以下の手順でダークモードに設定できます。

  1. ディスプレイ→詳細設定→デバイスのテーマを選択する
  2. ダークを選択する

Androidナイトモード設定方法

Androidでナイトモードを使うには「目の保護ーーブルーライト軽減 あなたの不眠を解消します」を使用します。

https://play.google.com/store/apps/details?id=com.eyefilter.nightmode.bluelightfilter&hl=ja

インストールするとナイトモードに関する説明が表示されます。説明を全て読むと下のような画面になるので、電源アイコンをタップしてナイトモードをオンにしてください。

電源アイコンをタップ

他のアプリの上に表示を許可します。

他のアプリの上に表示を許可します。

ナイトモードでは色温度と強度、画面の暗さ、自動タイマーのセットなどができます。

色温度・強度の設定

画面の暗さ・自動タイマーの設定

こちらのアプリなのですが、あくまでもアプリにオーバーレイする形で赤色の画面をかぶせているだけなので、通知や設定などのAndroidシステムが表示する画面にはナイトモードが有効になりません。通知を見る時は相変わらず、少しまぶしい思いをしなければなりません。この点を予めご了承ください。

バージョン9ではダークモードに対応していることから、おそらく今後ナイトモードにも対応すると予想されます。今後の開発に期待しましょう。

アプリ別ダークモード設定方法

ここからは各アプリ・ソフトウェアごとのダークモードの設定方法を説明します。

Chrome

Chromeをダークモードに設定する方法を説明します。

Chrome(PC版)ダークモード設定方法

PC向けのChromeでダークモードを設定する方法を説明します。

とは言ってもWindowsの場合、上の設定で色を「黒」に変更した時点で、Chromeがダークモードになってくれています。そのため追加で何かを設定する必要はありません。

もしWindowsはライトモード、Chromeだけはダークモードで使用したい場合は、Chromeのショートカットに次のような設定をします。

  1. ショートカットを右クリックしてプロパティを開く
  2. プロパティ→ショートカットのリンク先の末尾に「 --force-dark-mode」を追加する
    (."exe"と--force-dark-modeの間には半角スペースを空ける)
  3. 適応して、OKを押す

ショートカットを右クリックしてプロパティを開く

プロパティ→ショートカットのリンク先の末尾に「 --force-dark-mode」を追加する

上手く行けば、下の画像のように、WindowsはライトモードでChromeはダークモードで表示できます。

WindowsはライトモードChromeはダークモード

Chromeアプリダークモード設定方法

Chromeアプリでダークモードを利用するにはバージョンが74以上である必要があります。まずはアドレスバーに「chrome://version」と入力して、バージョンを確認しましょう。

アドレスバーに「chrome://version」と入力する

もし74より低いバージョンなら、PlayStoreで更新してください。

Chromeアプリは次の手順でダークモードに変更できます。

  1. アドレスバーに「chrome://flags」と入力する
  2. ページ内の検索窓に「android chrome ui dark mode」と入力する
  3. フラグを「Default」から「Enabled」に変更する
  4. 「Relaunch Now」をタップしてChromeを再起動する
  5. 再起動したらアプリ右上の︙ボタンから設定を開く
  6. 「テーマ」をタップする
  7. モードを「明」から「暗」に変える

アドレスバーに「chrome://flags」と入力する

ページ内の検索窓に「android chrome ui dark mode」と入力する

フラグを「Default」から「Enabled」に変更する

「Relaunch Now」をタップしてChromeを再起動する

再起動したらアプリ右上の︙ボタンから設定を開く

「テーマ」をタップする

モードを「明」から「暗」に変える

うまく行けば下のように黒背景の画面に変わります。

Chromeアプリダークモード

もし設定に「テーマ」が現れない場合は、もう一度アプリを再起動するか、スマホを再起動してください。

Webサイトをダークモードで表示する「Dark Reader」の使い方

上の設定ではChromeのユーザーインターフェイス(UI)はダークモードにすることができました。ですが、肝心のウェブサイトがダークモードに対応していないと、結局、白い画面を見させられることになります(本サイトもそうですが)。

「Dark Reader」というChrome拡張機能を利用すれば、表示するサイトもダークな表示にすることができます(なお、Chrome拡張機能であるため、Androidでは利用できません)。

Dark Readerのインストール

Dark Readerのインストールはこちらのサイトから「Chromeに追加」でできます。

https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh

Dark Readerの使い方

Dark Readerのアイコンをクリックすると設定が表示され、ダークモードのオンオフができます。またAlt + Shift + Dで拡張機能のオンオフ切り替えができます。

Dark Reader

Dark Readerでは単にサイトをダークモードにするだけでなく、輝度やコントラストなどの設定をサイトごとに行うことができます。輝度は表示の明るさ、コントラストは明暗の違いの大きさ、セピアは赤みの強さ、グレースケールは彩度の強さが調整できます。

Dark Reader設定

Dark Readerはサイトごとにブラックリストを設定できます。ブラックリストに入れたサイトではDark Reader が無効になります。YoutubeやTwitterのようにサイトがダークモードに対応している場合はDark Readerのブラックリストに入れることをオススメします。

Dark Reader ブラックリスト

Twitter

Twitterでダークモードを設定する方法を説明します。

Twitter(PC)のダークモード設定方法

Twitter(PC)でダークモードを設定するには次のようにします。

  1. ホームから「もっと見る」を選択する
  2. 「表示」を選択する
  3. 背景画像をダークブルーまたはブラックにする

ホームから「もっと見る」を選択する

「表示」を選択する

背景画像をダークブルーまたはブラックにする

TweetDeckダークモード設定方法

TweetDeckでダークモードを設定するには次のようにします。

  1. 左下の歯車アイコンから「Settings」を選択する
  2. THEMEを「Dark」に変更して「Done」を押す

左下の歯車アイコンから「Settings」を選択する

THEMEを「Dark」に変更して「Done」を押す

Twitterアプリダークモード設定方法

Twitterアプリでダークモードを設定するには次のようにします。

  1. ホームのアイコンをタップして、「設定とプライバシー」→「ディスプレイとサウンド」を選択する
  2. 「ダークモード」をタップしてオンにする

設定とプライバシーを選択する

ディスプレイとサウンドを選択する

ダークモードをオンにする

Youtube

Youtubeでダークモードを設定する方法を説明します。

Youtube(PC)のダークモード設定方法

Youtube(PC)でダークモードを設定するには次のようにします。

  1. ホーム右上のアイコンをクリックして、「ダークテーマ」を選択する
  2. ダークテーマをオンにする

ホーム右上のアイコンをクリックして、「ダークテーマ」を選択する

ダークテーマをオンにする

Youtubeアプリダークモード設定方法

Youtubeアプリをダークモードに設定するには次のようにします。

  1. アプリ右上のアイコンから「設定」→「全般」を選択する
  2. ダークテーマをオンにする

設定を選択する

全般を選択する

ダークテーマをオンにする

Kindle

Kindleをダークモードにするにはユーザーインターフェイス(UI)の設定と本の背景の設定の2つが必要です。

Kindle for PCダークモード設定方法

Kindle for PCのUIをダークモードにするには左上の☼マークを押します。

左上の☼マークを押す

Kindle for PCの本の背景を黒くするには、適当な本を開いて、「Aa」を選択して、カラーモードを「黒」にします。

「Aa」を選択して、カラーモードを「黒」にする

Kindleアプリダークモード設定方法

KindleアプリのUIをダークモードに設定するには次のようにします。

  1. その他→設定→色のテーマを選択する
  2. 色のテーマを「濃い」に設定する

その他→設定を選択する

色のテーマを選択する

色のテーマを「濃い」に設定する

本の背景を黒にするには次のようにします。

  1. 適当なKindle本を開く
  2. 本のメニューバーから「Aa」を選択する
  3. カラーを「黒」にする

本のメニューバーから「Aa」を選択する

カラーを選択する

カラーを「黒」に設定する

Discord

Discordでダークモードにする方法を説明します。Discordは賢いのでどれか1つのデバイスでダークモードを設定すれば、それが全体に適応されます。

Discordをダークモードにするには次のようにします。

  1. 歯車アイコンから「ユーザー設定」を開く
  2. テーマから「ダーク」を選択する

歯車アイコンから「ユーザー設定」を開く

テーマから「ダーク」を選択する

Slack

Slackは現在、スマホアプリのみダークモードに対応しています。WindowsとmacOSは未対応です。

Slack(PC)ダークモード設定方法

Slack(PC)ダークモードにするには次のようにします。

  1. 画面左上から「環境設定」を選択する
  2. テーマを開き、「ダーク」に設定する

画面左上から「環境設定」を選択する

テーマを開き、「ダーク」に設定する

Slackアプリダークモード設定方法

Slackアプリをダークモードにするには次のようにします。

  1. アプリ右上の︙ボタンから「Settings」を選択する
  2. 「Dark Mode」を選択する
  3. 再起動が必要と言われるので「CONTINUE」を押す

アプリ右上の︙ボタンから「Settings」を選択する

「Dark Mode」を選択する

再起動が必要と言われるので「CONTINUE」を押す

Notion

Notionでダークモードを設定する方法を説明します。

Notion(PC)ダークモード設定方法

Notion(PC)でダークモードを設定するにはCtrl + Shift + Lを押して下さい。

Notionアプリダークモード設定方法

Notionアプリでダークモードを設定するには、左上のアイコンからメニューを開き、「Dark Mode」を選択します。

左上のアイコンからメニューを開き、「Dark Mode」を選択します。

Recent Posts

Next.jsでsitemap.xml生成する

Next.jsでSSRやnext-sitemapを用いてsitemap.xmlを生成する方法を紹介します。

Rust製の爆速端末Alacrittyのインストールと設定方法

Rust製のGPUで高速レンダリングするターミナルエミュレータAlacrittyのインストール方法、tmux、NeoVimでのTrue Color、カラースキーム、Font、デフォルトの端末の設定などの紹介をします。

react-modalを使ってModalコンポーネントを作る

react-modalを使ってModalコンポーネントを作る方法を解説します。モーダルの外側をクリックして閉じる、アニメーションを付ける等の基本的な機能から、CSS-in-JS(Emotion)を使ってタイリングの方法を説明します。

Emotionを使ってGatsbyでtailwindを使う方法

Gatsby & Emotion & tailwindの環境構築、スタイリング方法についてまとめました。twin.macroを使えば、classNameだけでなく、Styled Componentsやcss propでスタイリングできます。

GatsbyのLinter/Formatter, CSS-in-JS環境構築

Gatsbyのインストール方法、プロジェクトの作り方、Linter(ESLint, stylelint)/Formatter(prettier)、CSS-in-JS(styled-components, Emotion)、tailwindの設定方法を説明します。