対応させる

対応させる方法はすごく簡単です。

@media (prefers-color-scheme: dark) { xxx } で対応させる事が可能です。

これだけ。一応、@media (prefers-color-scheme: dark) { xxx } の { } と、その中に書くCSSの { } は別なので。

xxx 外に書くものは「ライトモード」で表示されるスタイル、xxx 内では「ダークモード」で表示されるスタイルになります。ただし、 xxx 内で指定しなかったスタイルについては、xxx 外のスタイルが採用されます。

一応そんな感じです。他にもJavaScriptを利用した方法があるようですが、OSの設定に従う設定はこれに限るみたいですね。

対応

このコードを利用するには対応したOSとブラウザが必要です。ただ、対応しないものに関しても読み込み自体には問題ありません。

iOS 13以降
iPadOS 13以降
Android 10以降
Windows 10 1903（May 2019 Update）以降
macOS Mojave 10.14以降

Chrome 76以降（Win10/Mac/Android）
Safari 13以降（Mac）
Safari iOS 13以降（iOS/iPadOS）
Firefox 67以降（Win10/Mac）
Firefox 68以降（Android）
Android ブラウザ 67以降（Android）

現時点での対応環境が少なく、IEはもちろんMicrosoft Edgeも対応してません（Chromiumベースになるまで対応しないかな）。また、OS自体も2018年に登場したmacOS Mojaveを除いてはすべて2019年春以降にリリースされたもののため、シェアが低いので、一応実装してみたいな感じでいいかと。個人的には、もうしばらく様子を見てからダークモードの対応を検討します。

*1:ダークモードはダークテーマやナイトテーマなど、OSやブラウザ、機器によって呼び名が違いますが、この記事では広く浸透しているダークモードという呼び名を利用します。