Webのダークモード(Dark Mode) をCSS “-prefers-color-scheme”で対応する方法

iOS 13でも対応となり、メジャーなアプリやWebサイトで対応がはじまっている「ダークモード（Dark Mode)」ですが、WebページでもCSSで対応することができます。そのやり方をご紹介します。

ダークモード【Dark Mode】とは？

ダークモードとは、色調を暗くすること、OSやアプリのUIを暗色系の配色に切り替える機能です。

Webでの対応はCSS “-prefers-color-scheme”で

メディアクエリ prefers-color-scheme が実装されました。

prefers-color-scheme

CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

CSS

// ライトモードの時、背景を白色、文字を黒色にする設定

@media (prefers-color-scheme: light) {
  background-color: #fff;
  color: #000;
}

// ダークモードの時、背景を白色、文字を黒色にする設定

@media (prefers-color-scheme: dark) {
  background-color: #000;
  color: #fff;
}

パラメーター

no-preference:

ユーザーが設定を行っていない。

light:

ユーザーが明色のテーマを持つインターフェイスを設定。

dark:

ユーザーが暗色のテーマを持つインターフェイスを設定。

メディクエリとは？

メディアクエリとは？

画面の解像度 (例えばスマートフォンの画面とコンピュータの画面) といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。2012年6月にはW3C勧告になり、[1]レスポンシブウェブデザイン (RWD) の基礎になっている。

Wikipedia引用　https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA

使い方

メディアタイプと1つ以上の式でメディアクエリは構成され、真または偽に決定されるメディア特性に関係を持つ。

Wikipedia引用　https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA

サポート環境

対応ブラウザの状況はこちら

Can I use prefers-color-scheme?
https://caniuse.com/#search=prefers-color-scheme

まとめ

夜間でも目に優しく、寝る前にスマホを見ていると眠れなくなるという課題の解決の一手となりそうなダークモード（Dark Mode)を、WebでもCSSで対応する方法のご紹介でした。

Webのダークモード(Dark Mode) をCSS “-prefers-color-scheme”で対応する方法

ダークモード【Dark Mode】とは？