Documentation CSS

この記事で学べること

  • color-schemeプロパティの概念と目的
  • light、dark、no-preferenceの各値の違い
  • ダークモード対応の実装方法
  • 複数のカラースキームを同時に指定する方法
  • prefers-color-schemeメディアクエリとの連携

概要

CSSのcolor-schemeプロパティは、要素のカラースキームを指定するために使用されます。このプロパティを活用することで、ダークモードやライトモードに適したスタイルを適用し、ユーザーの視覚的な体験を向上させることができます。本記事では、color-schemeの基本的な使い方、指定可能な値、具体的な使用例について詳しく解説します。

color-schemeの基本的な使い方

color-schemeプロパティは、主に要素のカラースキームを明示的に指定するために使用されます。基本的な構文は以下の通りです。

selector {
  color-scheme: value;
}

ここで、valueにはいくつかの選択肢があります。

color-schemeで指定できる値

color-schemeプロパティでは、以下の値を指定できます。

light

ライトモード用のカラースキームを使用します。要素は、ライトテーマに適したスタイルが適用されます。

.element {
  color-scheme: light;
}

dark

ダークモード用のカラースキームを使用します。要素は、ダークテーマに適したスタイルが適用されます。

.element {
  color-scheme: dark;
}

no-preference

ユーザーが特定のカラースキームを好まない場合に指定します。要素は、デフォルトのスタイルが適用されます。

.element {
  color-scheme: no-preference;
}

multiple values

複数の値を指定することもできます。たとえば、両方のモードをサポートする場合は以下のように指定します。

.element {
  color-scheme: light dark;
}

color-schemeの具体的な使用例

ダークモード対応のスタイル

ダークモードに適したスタイルを適用する際にcolor-schemeを使用します。

body {
  color-scheme: dark;
  background-color: #121212;
  color: #ffffff;
}

この設定により、ダークモードに合わせた背景色とテキスト色が適用されます。

ライトモード対応のスタイル

ライトモードのスタイルを指定する例です。

body {
  color-scheme: light;
  background-color: #ffffff;
  color: #000000;
}

この設定により、ライトモードに適した色合いが適用されます。

複数のモードに対応

両方のカラースキームに対応させる例です。

.element {
  color-scheme: light dark;
  background-color: inherit;
  color: inherit;
}

この設定では、ユーザーの選択に応じて自動的にカラースキームが適用されます。

注意点

  1. ブラウザサポート
    color-schemeプロパティは、最新のブラウザで広くサポートされていますが、古いブラウザでは無視される場合があります。対応状況を確認することが重要です。
  2. カラーモードのユーザー設定
    ユーザーが選択したカラースキームに従ってスタイルが適用されるため、ユーザーエクスペリエンスを考慮したデザインが求められます。

まとめ

CSSのcolor-schemeプロパティは、ダークモードやライトモードに適したスタイルを簡単に指定するための便利な機能です。ユーザーの好みに合わせた色合いを提供することで、より良い視覚的体験を実現できます。特に、モダンなウェブサイトやアプリケーションでは、このプロパティを活用して、ダイナミックなデザインを実現しましょう。

ポイントの振り返り

値説明使用例
lightライトモード明るい背景のUI
darkダークモード暗い背景のUI
light dark両方に対応ユーザー設定に追従

関連プロパティ・メディアクエリ

名前説明
prefers-color-schemeユーザーの色設定を検出
forced-colors強制カラーモードの検出
accent-colorアクセントカラーの指定

参考文献

円