ユーザー設定に合わせた配色でWebサイトをもっと魅力的に！ CSSの'color-scheme'プロパティでできること

CSSのcolor-schemeプロパティは、ウェブサイトやWebアプリの配色を、ユーザーのオペレーティングシステム設定や環境設定に基づいて調整するために使用されます。これは、ユーザーが「ライトモード」または「ダークモード」を選択している場合に、ウェブサイトの外観を自動的に切り替えることを可能にし、ユーザーにとってより快適な閲覧体験を提供します。

利点

コードの簡潔化
バッテリー消費量の節約（ダークモードの場合）
アクセシビリティの向上
ユーザー設定を尊重したデザインが可能

構文

color-scheme: light | dark;

dark：ダークモードを指定します。
light：ライトモードを指定します。

初期値

color-schemeプロパティの初期値はautoです。これは、ブラウザがユーザー設定に基づいて適切な配色を選択することを意味します。

適用範囲

color-schemeプロパティは、要素レベルとページレベルで設定できます。

ページレベル
:root擬似クラスにcolor-schemeプロパティを設定することで、ページ全体の配色を指定できます。
要素レベル
特定の要素にcolor-schemeプロパティを設定することで、その要素のみ配色を変更できます。

例

以下の例は、color-schemeプロパティを使用して、ページ全体をライトモードまたはダークモードに切り替える方法を示しています。

:root {
  color-scheme: light; /* デフォルトはライトモード */
}

/* ダークモードを有効にする場合 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

color-schemeプロパティは、他のCSSプロパティと組み合わせて使用することができます。例：
color-schemeプロパティは、システムカラーパレットに基づいています。そのため、ウェブサイトで使用される色は、ユーザーのオペレーティングシステムによって異なる場合があります。

:root {
  color-scheme: dark;
  background-color: #333;
  color: #eee;
}

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* ライトモードのスタイル */
:root[color-scheme="light"] {
  --bg-color: #fff;
  --text-color: #000;
}

/* ダークモードのスタイル */
:root[color-scheme="dark"] {
  --bg-color: #333;
  --text-color: #eee;
}

例2：要素レベルでの配色設定

この例では、color-schemeプロパティを要素レベルで使用して、特定の要素のみ配色を変更する方法を示します。

.button {
  color-scheme: light; /* ボタンは常にライトモード */
  background-color: #4CAF50; /* 緑色 */
  color: white;
}

.text-box {
  color-scheme: dark; /* テキストボックスは常にダークモード */
  background-color: #f2f2f2; /* 灰色 */
  color: black;
}

例3：システムカラーパレットを使用した配色

この例では、color-schemeプロパティとCSS変数を使用して、システムカラーパレットに基づいて配色を設定する方法を示します。

:root {
  color-scheme: light;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* ライトモードのスタイル */
:root[color-scheme="light"] {
  --bg-color: hsl(0, 0%, 100%); /* 白 */
  --text-color: hsl(0, 0%, 20%); /* 黒 */
}

/* ダークモードのスタイル */
:root[color-scheme="dark"] {
  --bg-color: hsl(0, 0%, 20%); /* 黒 */
  --text-color: hsl(0, 0%, 100%); /* 白 */
}

これらの例は、color-schemeプロパティを様々な方法で使用する方法を示すほんの一例です。創造性を働かせ、このプロパティを使用して、ユーザーにとって魅力的で快適なWebデザインを作成してください。

これらのリソースは、配色を作成するためのインスピレーションを得るのに役立ちます。

メディアクエリ

メディアクエリを使用して、ユーザーのオペレーティングシステムがライトモードまたはダークモードかどうかを検出することができます。そして、それぞれのモードに合わせたスタイルを定義することができます。

/* ライトモードの場合 */
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
}

/* ダークモードの場合 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #eee;
  }
}

長所

柔軟性が高い
シンプルで分かりやすい

短所

コードが冗長になる可能性がある
すべてのブラウザでサポートされているわけではない

JavaScript

JavaScriptを使用して、ユーザーのシステム設定を取得し、それに基づいてスタイルを動的に変更することができます。

const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';

if (prefersColorScheme === 'dark') {
  document.body.classList.add('dark-mode');
} else {
  document.body.classList.remove('dark-mode');
}

長所

コードを柔軟に記述できる
ブラウザのサポート状況に関係なく動作する

短所

複雑になる可能性がある
JavaScriptを使用する必要がある

CSS変数とシステムカラー

CSS変数とシステムカラー機能を使用して、ユーザーのシステム設定に基づいて動的に色を調整することができます。

:root {
  --bg-color: initial;
  --text-color: initial;
}

/* ライトモードの場合 */
@media (prefers-color-scheme: light) {
  :root {
    --bg-color: system(color-light);
    --text-color: system(color-dark);
  }
}

/* ダークモードの場合 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: system(color-dark);
    --text-color: system(color-light);
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

長所

コードを読みやすい
シンプルでエレガント

短所

比較的新しく、すべてのブラウザでサポートされているわけではない

手動設定

ユーザーが手動で配色を選択できるように、設定パネルを実装することができます。

長所

ユーザーに完全なコントロールを提供する

短所

すべてのユーザーが設定パネルを使用するとは限らない
開発と実装に時間がかかる

color-schemeプロパティは、CSSで配色を調整するための強力な機能ですが、代替方法もいくつか存在します。それぞれの方法の長所と短所を理解し、プロジェクトに最適な方法を選択することが重要です。