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で対応する方法のご紹介でした。
関連書籍
リンク
リンク
