CSSのメディアクエリで、@media (prefers-color-scheme: dark) {// スタイル定義}
とすると、ユーザーのOS設定がダークモードの場合のスタイルを定義することができる。
// ダークモードの場合
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}
// ライトモードの場合
@media (prefers-color-scheme: light) {
body {
background-color: #fff;
color: #333;
}
}
※ Internet Explorerは非対応
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme
コメント