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

Windows, macに続き、iOS や android にもダークモードが適用されます。今後、ダークモードへの対応が拡大していきますので、早めの対応をしたほうが良さそう。

今回は、ウェブサイトをダークモードに対応させる方法をご紹介します。

prefers-color-scheme: dark

対応状況や注意

対応しているブラウザは Can I Use… で確認できます。

最新のmac, windows用ブラウザならどれも対応しています。モバイルはまだほぼ非対応。
iOS は iOS13 で、android は Q でダークモード対応します。この秋には、ダークモードがかなり浸透していそう。

実装方法

ダークモードは、メディアクエリを使用します。レスポンシブでおなじみのやつ。

HTML

<p class="darkmode">ここに書かれた内容はダークモード対応となります</p>
<p>ここに書かれた内容はダークモード非対応です。</p>

CSS

p{ color: black; }
p.darkmode{
  @media (prefers-color-scheme: dark){
    background-color: black;
    color: white;
  }
}

@media (prefers-color-scheme: dark){}に書かれた記述がダークモード時のスタイルとなります。

実装結果

ダークモード対応のブラウザ: 文字白、背景黒
ダークモード非対応のブラウザ: 文字黒、背景白

ダークモードに対応しているブラウザで見ると上記のデモが、文字色 = 白、背景色 = 黒 で表示されているかと思います。

prefers-color-scheme: light

ダークモードに対応させる場合は、メディアクエリで dark を指定しましたが、ダークモードではない場合のみスタイルを変更する場合は下記のように記述します。

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

prefers-color-scheme はまだ対応していないブラウザが多いので、注意しながらコード記述をしましょう。