【CSS Modules】prefers-color-schemeメディア機能の使い方

prefers-color-schemeプロパティは、ユーザーがオペレーティングシステムやユーザーエージェント（ブラウザなど）全体で設定している、好ましいカラースキーム（配色テーマ）を検出するために使用されるCSSのメディア特性です。このプロパティを利用することで、ウェブサイトやアプリケーションは、ユーザーのシステム設定に合わせた「ライトモード」や「ダークモード」といった表示テーマを自動的に適用できるようになります。

具体的には、このプロパティはCSSの@mediaルール内で使用されます。例えば、ユーザーがダークモードを好む設定にしている場合、@media (prefers-color-scheme: dark)ブロック内に記述されたスタイルが適用されます。反対に、ライトモードを好む設定の場合には、@media (prefers-color-scheme: light)ブロック内のスタイルが適用されます。これにより、開発者はユーザーの視覚的な好みに合わせた、より快適なユーザーエクスペリエンスを提供することが可能になります。

取りうる値は主にlight（明るい配色が好ましい場合）とdark（暗い配色が好ましい場合）の二つです。この機能は、特に夜間の利用時や、目に優しい表示を求めるユーザーにとって重要であり、アクセシビリティとユーザーインターフェースの柔軟性を向上させる上で非常に役立ちます。システムエンジニアにとって、このプロパティを理解し活用することは、現代のウェブ開発においてユーザー志向のデザインを実現するための基本的な知識となります。

Copy
1@media (prefers-color-scheme: dark) {
2  body {
3    background-color: #333;
4    color: #eee;
5  }
6}

引数なし

引数はありません

戻り値なし

戻り値はありません