【CSS】WEBサイトをダークモードに対応させる

Android 10やiOS 13以降機能として実装されたダークモード。
ダークモードに切り替えた時、WEBサイトをCSSでダークモードに対応させる方法の覚え書きです。

1.書き方

メディア特性の「prefers-color-scheme: dark」内にダークモード時のスタイルを書きます。

/*通常時*/
body{
	background-color: #fff;
	color: #000;
}

/*ダークモード時*/
@media (prefers-color-scheme: dark) {
	body{
		background-color: #000;
		color: #fff;
	}
}

2.検証方法

Google Chromeのデベロッパーツールで確認できます。

1.デベロッパーツールを開きます。
2.3点リードメニューの「その他のツール」→「レンダリング」を選択します。
3.レンダリング内の「自動ダークモードを有効にする」をチェック

4.ダークモードに切り替わります。

3.対応ブラウザ

主要ブラウザでサポートされています。（2022年7月1日現在）

▼prefers-color-schemeのサポート状況 | Can I use
https://caniuse.com/?search=prefers-color-scheme

4.参考サイト

こちらの記事を参考にさせていただきました。
▼prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme