カンタン！CSSだけでWebサイトをダークモードに対応させる方法 〜目に優しく省エネにも〜

画面全体の色合いを暗く変更できる「ダークモード」は、iOSやMac、WindowsなどOSレベルで対応しています。

こういったモードが用意されている理由は、見た目がクールでカッコいいという他にも

• 暗い場所での表示において目への負担を軽減できる
• 暗いと光らせる必要がなくなるため省電力となりバッテリー持ちが良くなる(有機ELのみ。普通の液晶ディスプレイでは効果なし)

といったメリットがあります。

スマホだけでなく、MacやWindowsでもダークモードに対応しているので、最新のOSを導入したPCであればほとんどの方がダークモード表示が可能となっているはず。

日没の時間に合わせて自動的にダークモードに切り替わり、ブルーライトカット機能(夜間機能)も組み合わせれば完璧ですね。(ブルーライトが本当に目に悪影響を及ぼしているのか？といった議論が最近見られますが、ここではその話はさておき…)

いやあ… これでいろんな作業をしていても目に優しい…

と思うのはまだ早くて、Webサイトを閲覧している時はどうだろうか。

今はまだ多くのサイトが白背景ベースのものばかりで、せっかくOS側でダークモードにして目が落ち着いていても、いきなり眩しいWebサイトを見てしまうと「うわっ…！」となりませんか。

というわけで、ダークモードの浸透化に合わせてWebサイトも対応してみよう！という形で解説していきます。

対応方法自体はとってもカンタンですよ！

ダークモード時に適用させる場合のメディアクエリ

ご自身のWebサイトに以下のメディアクエリを追加して下さい。
もしbodyセレクタをすでに使用していれば、その下に追加して下さい。

/*ダークモード時のCSS*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

WebサイトのもともとのCSSの書き方にもよると思いますが、これを追加するだけでダークモード時は背景が暗く、テキストは白となったかと思います。

ほらカンタン！

実際に使った例

カンタン！とは言いましたが、もちろん見栄え良く対応させるにはそれなりの記述が必要です。

例えば以下のような…

/* ヘッダー */
.headarea {
    width: 100%;
    height: 300px;
    background-color: #aaaaaa;
    color: #505050;
}
/* コンテンツ */
.maincontent {
    width: 100%;
    height: 800px;
    background-color: #ffffff;
    color: #505050;
}

といった感じで、薄いグレーのヘッダーと白い背景のコンテンツがあった場合は、

/* ヘッダー */
.headarea {
    width: 100%;
    height: 300px;
    background-color: #aaaaaa;
    color: #505050;
}
/* コンテンツ */
.maincontent {
    width: 100%;
    height: 800px;
    background-color: #ffffff;
    color: #505050;
}
 
/* ダークモード時の処理 */
@media (prefers-color-scheme: dark) {
  /* ヘッダー */
    .headarea {
        background-color: #505050;
        color: #dddddd;
    }
    /* コンテンツ */
    .maincontent {
        background-color: #222222;
        color: #cccccc;
    }
}

といった感じで、もともとのCSSの後ろに同じプロパティ名で変更する色指定箇所だけを入力してやればOKです。

なお、

@media (prefers-color-scheme: dark) {}

を、

@media (prefers-color-scheme: light) {}

とすることによって、ライトテーマ時の指定をすることも可能です。

ダークテーマを追加するにあたってデザイン上の注意点

単純に反転色を使っていけば良いように思いますが、UI的には少し考えたほうが良いのかもしれません。

例えばライトテーマ(通常表示)で表現していたシャドウ(影)は、繊細な表現として使っていたならダークテーマ時には影の代わりとなるような表現が必要かもしれません。
奥行きを表現する場合は、ブラックの濃度を調整するなど考慮した方が良いと考えられます。

また、ピュアブラック(#000000)の背景にピュアホワイト(#ffffff)のテキストは、チカチカして疲れる場合があるようです。

そのため、ディープグレー(#313131など)の背景にオフホワイト(#fafafaなど)のテキストというように、ややコントラスト差を縮めた方が文字は読みやすく目への負担を軽減できるようです。

このように、デザインを意識しているのならばダークモードでも美しく読みやすく表示されるよう工夫が必要となります。

対応ブラウザーについて

だいぶ対応してきてはいますが、新しいメディアクエリーのため一部対応していないものもあります。

対応していなくても従来の表示を続けるだけなので、大きな問題にはならないとは思いますが…

注意したいのは、現行のEdge、IE、Operaが対応していないことです。
Operaもいずれ追従するかと思いますが、IEは切り捨てられEdgeはWindowsのアップデートでいずれ対応することを考えれば問題ないように思います。
個人的にiOS Safariが対応していることがデカいですね。

※Microsoft Edgeの最新版はダークモードに対応しています。(2020年2月追記)

おまけ - OSをダークテーマにする方法

もしそもそもダークテーマにする方法がわからない！という方のために、OS別にダークテーマを設定する方法を解説していきます。

いずれも最新版を使用している前提で解説していきます。

Windows 10をダークテーマ化したい

「設定」を開き、「個人用設定」→「色」を選択します。

「既定のアプリ モードを選択します」の箇所で「黒」を選択すればOKです。

なお、現行のMicrosoft EdgeやIEではダークテーマとして認識されないので、別途ChromeやFirefox、Edge beta版を使用しましょう。

項目が見当たらない場合は、Windows Updateを試してMay 2019 Update以上にアップデートして下さい。

macOSをダークテーマ化したい

「システム環境設定」を開き、「一般」をクリック。

画面上部にある「外観モード」を「ダーク」に指定すればダークモードとなります。

「自動」とすると、日中はライトモード、日没を迎えればダークモードに自動的に切り替えることもできます。

項目が見当たらない場合は、macOS 10.14 Mojave以上の新しいバージョンにアップデートしていない可能性があります。

iOS(iPhone、iPad)をダークテーマ化したい

「設定」アプリ内の「画面表示と明るさ」をタップ。

すると「ライト」か「ダーク」かを選択できる箇所があるので、ダークを選択。
設定画面など全体が黒くなっていればすでにダークです。

項目が見当たらない場合は、iOS 13にまだアップデートしていないか、古いiPhone iPadを使用していてアップデートできない場合があります。

Androidをダークテーマ化したい

(スクリーンショットは準備中…)

「設定」アプリ内の「ディスプレイ」をタップ。

「ダークテーマ」のトグルをONにすれば完了です。

項目が見当たらない場合は、Android 10にアップデートしていないか、機種によって別の箇所にあったりできないことがあります。

まとめ - ぼちぼち対応を進めていけば良いかも

CSSのコード量が多いと対応も多くなりがちですが、一度やってしまえば流れに乗れている感がありますね(笑)

流れに乗るためだけでなく、世の中はスマートフォンの普及によって日常的に画面を注視する時間が圧倒的に増えているため、目の保護をする意味合いでも目に負担をかけないダークモードの実装はいずれ重要になってくるのではないかと見ています。

アプリやOSレベルでダークモードに対応しているのならば、Webページも合わせて対応していきたいところ。

ぜひ、ご自身で手掛けているサイトがあれば試してみて下さいね。