【CSS】ダークモードに対応する

こんにちは、ウェブラボクリエイターズメモです。

2019年9月にiOS13、Andoroid10がリリースされ、ダークモードが実装されました。
誰もが期待していた機能だと思います。夜間だと目に優しいし、消費電力も抑えられますね。

そこで今回はWebサイトのダークモードに対応について簡単に解説します。
実はCSSで簡単に対応できるので多少知識のある方ならすぐにできると思います。

実装方法

CSSのprefers-color-schemeというメディア特性を使用して検出します。
記述方法ですが、以下のようにダークモード時にのみ部分的にCSSを上書きしてあげます。

これだけで対応することができます。

ブラウザの対応状況

気になるブラウザの対応状況は以下を参考にしてください。

→ブラウザの対応状況（Can I use）
※「Can I use」というブラウザの対応状況を確認できるサービスを利用しています。CSSに限らずHTML5、SVG、JSなども機能ごとに確認できます。

現時点でEdge以外の主要なブラウザはほぼサポートされています。

ダークモードの設定方法

基本的にはOSの設定がダークモードになっていれば、ブラウザも自動で判別してくれます。
主要OSのダークモード切り替え方法を調べてみましたので以下をご覧ください。

■PC
・Windows10
［設定］→［個人用設定］→［色］→［既定のアプリモードを選択します］を黒に変更
・macOS（Mojave以降）
［システム環境設定］→［一般］→［外観モード］をダークに変更

■スマートフォン
・iOS（13~）
［設定］→［画面表示と明るさ］→［外観モード］をダークに変更
・Andoroid（10~）
［設定］→［ディスプレイ］→［ダークテーマ］をオンに変更
※こちらは実機が手元に無いため未検証

おわりに

今回作成したDEMOは以下になります。

→DEMO

夜に訪問者が多いWebサイトなどは対応してあげるとユーザーに優しいですね。
背景色と文字色くらいでも対応してみる価値はあると思います。

以上、クリエイターズメモでした。