Webサイトをダークモードに対応させる方法

2020-01-30 (最終更新: 2020-01-30)

概要

iOSで人気が出た、ダークモードという黒を基調とした画面モードがあります。

ダークモードでは、アプリのデザインはもちろん、Webページでも黒を基調したデザインにすることができます。

しかし、Webページでは、Webページの作成者がダークモードへの対応のために、CSSを加える必要があります。

ここでは、Webページをダークモードに対応させる方法を紹介します。

ダークモードへの対応方法は単純です。

一言で言うならば、メディアクエリを使います。

具体的な使い方は次のようになります。

body {
    background-color: #F5F5F5;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #111;
    }
}

この例の場合、ダークモードでない場合はbodyタグの背景色として#F5F5F5が適用され、ダークモードの場合は、メディアクエリの内容が適用され#111が背景色となります。

このように、メディアクエリを使ってダークモードに対応できます。

正直、ダークモードへの対応ではデバッグが大変です。

理由としては、簡単にダークモードとダークモードではないライトモードとの切り替えができないということがあります。

できれば、ブラウザ上から切り替えられた方が便利なのですが、実際の切替では設定からわざわざダークモードとライトモードを切り替える必要があります。

デバッグでは、このように切り替えをして正しく表示されるか確かめる必要があります。

誰かいい方法があったら教えてください。

比較的簡単に、ダークモード対応ができました。

誰かの参考になれば幸いです。