OSのダークモード、ライトモードと連動して、Webサイトのカラーテーマを切り替える。

この記事は、次のリンク先にある前回の記事の続編です。

↑この記事では、特定の時間を定義して現在の時間と比較、
それによってWebサイトにダークモードを適用する、という方法について書きました。

今回は、そのダークモードを、
macOSやiOSがダークモードになった際と連動させる方法について、書いていきます。
どういうことかというと、次のムービーをご覧いただくとわかりやすいかと思います。

↑macOS上で設定をダークモードに切り替えると、連動してWebサイトのカラーテーマも切り替わったことが確認できるかと思います。

prefers-color-scheme: dark をつかう

さて、上記の様にmacOSやiOSと連動してカラーテーマを切り替えるには、次の記述を使います。

@media (prefers-color-scheme: dark) {
  // dark-theme の背景色を指定
  .site-wrapper {
    background: #212121;
  }

  // dark-theme の文字色を指定
  .site-wrapper .site-description,
  .site-wrapper .widget-title,
  .site-wrapper .site-title,
  <!-- ...(中略)... -->
  .site-wrapper .entry-title,
  .site-wrapper .entry-content,
  .site-wrapper .page-title,
  .site-wrapper .site-footer .site-info {
    color: #ffffff; // 黒背景になった時の文字色を指定
  }

  // その他必要に応じて dark-theme のリンク色などを指定
  .site-wrapper .widget_categories .cat-item {
    color: #18FFFF; // 黒背景になった時のリンク色を指定
  }
}

↑※クラス名は仮のものです。適宜、ご自身のサイトのhtml構造に置き換えて読んでください。

最初にある1行に注目してみてください。
@media (prefers-color-scheme: dark)

…@media ?
アットマーク、メディア…?

ということは…?

そうです。そうなんです。

なんと、cssのメディアクエリだけで、
OSのカラーモードに連動してWebサイトのカラーモードを切り替えることができるのです。

後述しますが、対応ブラウザもかなり幅広く、普通に使えるレベルのカバー範囲となっています。

macOSでのダークモード切替

ご存知の方も多いと思いますが、ダークモードはmacOSの場合は Version 10.14.x (Mojave) 以上で使用できます。
[システム環境設定] > [一般] を開くと、先ほどの動画の様に
設定画面の一番上にライト/ダークを切り替える[外観モード]という項目があります。
そこでライト/ダークモードを切り替えることができます。

iOSでのダークモード切替

iPhone等、iOS搭載端末の場合は、iOS 13 以上で、ダークモードに対応しています。
こちらの場合は
[設定] > [画面表示と明るさ] に進むと
ライト/ダークモードを切り替えることができます。

MacやiOS端末をお使いの方は、当サイトを開きながら、試してみてください。

当サイトは、夜になってアクセスいただくと夜用のカラーテーマになる機能がありますが、
MacやiOSのダークテーマ切替とも連動しており、ここまで書いてきた上記の手順での、OSのカラーテーマの切り替えが適用されることが確認できるかと思います。

prefers-color-scheme: light もある

もうお気付きかと思いますが、
@media (prefers-color-scheme: dark)
↑これがあるということは、
その逆もあるということです。単純に、以下のようにすれば適用されます。

@media (prefers-color-scheme: light) {
  // この中に light テーマの際に適用する項目を書く
}

↑…ただし、よく考えてみれば
デフォルトは light テーマですので、あまり利用することはないと思われますが…。
もし今後、light, dark 以外のカラーテーマの概念が登場した場合には、
もしかしたら頭の片隅に、ほんの少しだけ覚えておくと良いかもしれません。

対応ブラウザ

↑調べたところ、このmacOS/iOS連動のカラーテーマ切り替え機能を実現する
@media (prefers-color-scheme: dark)
は、上記のバージョン以上の各ブラウザで動作するとのことです。
これを見る限り、かなり幅広く対応しており、普通に使えると言っても問題ないレベルなのではないでしょうか。

この記事のまとめ

今回は、前回の記事:
「夜になったら」等、特定の条件でWebサイトのカラーテーマを変える方法[Web制作, WordPress]
の続編として、macOS, iOSのダーク/ライトモード切替に連動してWebサイトのカラーテーマを変える方法について、書きました。

私自身、この記事を書くにあたり、Webサイトのカラーテーマを変えると言うことを実際にやってみたのですが
これまで見ていたWebサイトを、今までになく新鮮な状態で見ることができ、
有意義な体験でした。

また、掲載されているコンテンツは同じでも
カラーテーマを切り替えるだけでここまで印象が変わるのか、と言うことを体感できたことに加え、
コンテンツの構成についても改めてじっくり見てみる良い経験にも繋がったため、
機会があれば試してみるのも一興かと思います。

当サイトでは、
今後もWebサイト制作に関するさまざまな記事を更新していく予定です。