最近、多くのアプリがダークモードに対応しており、システムがダークモードに移行するにつれてそれに合わせてダークモードになるのを目にしました。その後、ウェブページもこのような効果を実現できることが分かったので、このウェブサイトにダークモードを実装するために一下午を費やしました。

システムの設定に応じて色が自動的に変化するようにするには、CSSが提供するシンプルな方法があります。CSSでは、@mediaルールがメディアクエリを行うために使用され、デバイスの特性やパラメーターに基づいて異なるスタイルを適用することができます。また、@mediaの下のprefers-color-schemeはユーザーのシステムのテーマカラーの好みを検出することができます。prefers-color-schemeはno-preference（好みなし）、light（ライトモード）、dark（ダークモード）の3つの値をサポートしています。

![NOTE] MDNのドキュメントによると、no-preferenceはブラウザのホストシステムがテーマカラーの設定をサポートしていないか、サポートしているがデフォルトで設定されていないか、ユーザーが好みを指定していないことを意味します。

まず、テスト用のウェブページを作成します。

その中のCSS部分は以下のようになります。

ダークモードでは、テキストカラーを白にし、背景ボックスを黒い透明色に設定し、背景画像をダークな色に変更し、透明度を適切に調整したいと思います。これらのスタイルの変化を実現するためには、@media (prefers-color-scheme: dark)メディアクエリを:root疑似クラスセレクタと組み合わせて、以下のようCSSコードを変更します。

ユーザーがシステムのダークモードに切り替えると、ページの効果も自動的に更新されます。

![NOTE] 最後に注意するべきですが、一部のブラウザではprefers-color-schemeをサポートしていません。サポートされているブラウザはこちらで確認できます。