ダークモードの場合にCSSを切り替える(prefers-color-scheme)

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


【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。