CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法

Post on:2024年4月11日

sponsorsr

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。

CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。

CSS color-scheme-dependent colors with light-dark()
by Bramus!

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに
CSSにおけるシステムカラー
light-dark()関数の基礎知識
light-dark()関数の使い方

はじめに

システムカラーには、現在使用されているcolor-scheme値に反応する機能があります。CSSのlight-dark()関数は、それと同じ機能をデベロッパーに提供するものです。

CSSにおけるシステムカラー

CSSでは、多くの色空間から多くのカラーを使用することができます。たとえば、名前付きカラー、16進数カラー、特定の色空間にリンクされたカラー関数、さらには汎用的なcolor()関数も使用できます。

たとえば、名前付きカラーのcornflowerblueは、16進数カラーだと#6495EDで、ほかにもhsl(218.54deg 79.19% 66.08%)やcolor(display-p3 0.43 0.58 0.9)で表すことができます。

CSSではこういった名前や形式に加え、CSS Color Module Level 4で定義されたシステムカラーと呼ばれるカラーもあります。システムカラーとはブラウザによって定義されたカラーで、キーワードによって表されます。

たとえば、システムカラーのCanvas（<canvas>要素と混同しないでください）は「アプリケーションコンテンツまたはドキュメントの背景」を表します。これは「アプリケーションコンテンツまたはドキュメント内のテキスト」を表すCanvasTextと組み合わせて使用することも意図されています。

CSSでは、下記のように使用します。

body {
  color: CanvasText;
  background-color: Canvas;
}

body {

color: CanvasText;

background-color: Canvas;

}

デフォルトではCanvasTextはブラックに近い色で、Canvasはホワイトに近い色です。実際にはブラウザによって異なります。たとえば、ChromeのCanvasTextは#121212で、Safariでは少し明るめの#1e1e1eになります。

このシステムカラーの隠された能力は、color-schemeプロパティの計算値に反応できることです。たとえば、使用されているcolor-schemeがdarkの場合はCanvasTextとCanvasの値は反転します。

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

:root {

color-scheme: dark;

}

body {

color: CanvasText;

background-color: Canvas;

}

下記のデモページでは、:rootに設定されたcolor-schemeの値を変更すると、どのように表示されるかを確認できます。

light darkをチェックすると、要素がライトとダークの両モードをサポートしていることを示します。どちらの値を使用されるかの選択はprefers-color-schemeのメディア条件の値に依存します。
lightをチェックすると、要素がライトのカラースキームをサポートしていることを示します。
darkをチェックすると、要素がダークのカラースキームをサポートしていることを示します。

実際の動作は、デモページでご覧ください。

See the Pen
color-scheme: light dark; and System Colors by coliss (@coliss)
on CodePen.

color-schemeの値を変更できるデモページです。変更すると、body要素の宣言は同じであっても、ライトからダークに、あるいはダークからライトにページの背景色が変化します。

light-dark()関数の基礎知識

light-dark()関数のサポートブラウザは、下記の通りです。

light-dark()関数のサポートブラウザ

これまでは使用されているcolor-scheme値に反応するのは、システムカラーだけに限られていました。しかし、CSS Color Module Level 5で定義されているlight-dark関数のおかげで同じ機能が使用できるようになりました。

light-dark()関数の基本的な使い方は、2つの引数を設定します。引数はどちらも<color>である必要があり、使用されているカラースキームに応じていずれかの引数が選ばれます。

使用されているカラースキームがlightまたは不明の場合は、1番目の引数が返されます。
使用されているカラースキームがdarkの場合は、2番目の引数が返されます。

light-dark()関数の結果は、<color>になります。<color>が受け入れられるならCSSのどこにでも使用できます。たとえば、colorプロパティやbackground-colorプロパティをはじめ、liner-gradient()などの関数でも使用できます。

下記のCSSでは、background-colorにライトモード（または未知）では#cccを、ダークモードでは#333を適用します。

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

:root {

color-scheme: light dark;

}

body {

background-color: light-dark(#ccc, #333);

}

重要:
light-dark()関数が正しく機能するためには、color-schemeを設定する必要があることに注意してください。このプロパティは継承されるため、通常は:rootに設定します。また必要に応じて特定の要素に設定することもできます。

light-dark()関数の使い方

下記のCSSでは、カスタムプロパティでページ上のカラーをいくつか設定しています。そしてダークモードに対応するために、これらのカスタムプロパティの値はprefers-color-schemeで別のカラー値に上書きされます。

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

:root {

--primary-color: #333;

--primary-background: #e4e4e4;

--highlight-color: hotpink;

}

@media (prefers-color-scheme: dark) {

:root {

--primary-color: #fafafa;

--primary-background: #121212;

--highlight-color: lime;

}

実際の動作は、デモページでご覧ください。

See the Pen
Color switching with @media (prefers-color-scheme) { … } by coliss (@coliss)
on CodePen.

OSの設定でライトモードとダークモードを切り替えると、カラーが反映されます。

light-dark()関数を使用すると、このCSSは簡素化できます。:rootでcolor-schemeにlight darkを設定することで、OSのライトとダークモードに応じてカラーの値が自動的に適用されます。

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

:root {

color-scheme: light dark;

--primary-color: light-dark(#333, #fafafa);

--primary-background: light-dark(#e4e4e4, #121212);

--highlight-color: light-dark(hotpink, lime);

}

実際の動作は、デモページでご覧ください。

See the Pen
Color switching with light-dark() by coliss (@coliss)
on CodePen.

前述と同じ効果をlight-dark()関数で実装しています。

さらに、color-schemeをdarkまたはlightのいずれかに設定することで、DOMの特定のサブツリーにのみdarkまたはlightを使用することができます。下記のデモページでは:rootに設定しています。

See the Pen
Color switching with light-dark() and color-scheme by coliss (@coliss)
on CodePen.

「System」「Forced Light」「Forced Dark」のいずれかを選択すると、ライトまたはダークモードを使用することができます。

元記事の著者によるXのポストはこちら。

New article got published: CSS color-scheme-dependent colors with light-dark()

https://t.co/GJgCQC0i3N pic.twitter.com/HQFNVb8hbl

— Bramus (@bramus) March 27, 2024