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

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 はまだ対応していないブラウザが多いので、注意しながらコード記述をしましょう。

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。