@media (prefers-color-scheme)

レスポンシブ・関数

ユーザーのシステム設定がライトモードかダークモードかを検出するメディアクエリです。

構文

Syntax
@media (prefers-color-scheme: light | dark)

コード例

1

@media (prefers-color-scheme: dark) { body { background: black; } }
実行結果
システム設定に応じて自動切り替え

ダークモード時のスタイル

2

@media (prefers-color-scheme: light) { body { background: white; } }
実行結果
CSS変数でテーマ管理

ライトモード時のスタイル

💡 TIPS

OSやブラウザのテーマ設定を自動検出

関連プロパティ

ブラウザサポート

Modern browsers