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
