【CSS Modules】light-dark()関数の使い方
light-dark()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
light-dark()関数は、ユーザーのシステムの配色設定に応じて、要素に異なる色値を適用する関数です。この関数は、2つの色値を引数として受け取ります。1つ目の引数は、ユーザーがライトモード（明るいテーマ）を使用している場合に適用される色値です。2つ目の引数は、ユーザーがダークモード（暗いテーマ）を使用している場合に適用される色値を示します。
ウェブブラウザは、ユーザーのオペレーティングシステムやブラウザの設定で、ライトテーマとダークテーマのどちらを好むかを自動的に検知します。そして、このlight-dark()関数が使われている箇所では、そのユーザーの配色設定に基づいて、適切な方の色値を自動で選択し、要素に適用します。
これにより、開発者は単一のCSSプロパティを記述するだけで、ウェブサイトのデザインをライトテーマとダークテーマの両方に対応させることができます。例えば、color: light-dark(black, white);のように指定することで、ユーザーがライトモードであれば文字色が黒に、ダークモードであれば文字色が白に自動で切り替わります。
この機能は、従来の@media (prefers-color-scheme: light)や@media (prefers-color-scheme: dark)といったメディアクエリを複数記述する方法と比較して、CSSコードをより簡潔にし、メンテナンス性を向上させます。ユーザーの視覚的な好みに合わせたウェブサイトの表示を効率的に実現し、より柔軟でユーザーフレンドリーなウェブデザインの作成に貢献する重要な関数です。
構文(syntax)
1element { 2 property: light-dark(light-value, dark-value); 3}
引数(parameters)
<light-color>, <dark-color>
- light-color: ライトモード時の色を指定するCSSの値
- dark-color: ダークモード時の色を指定するCSSの値
戻り値(return)
<color>
light-dark() 関数は、light テーマと dark テーマのそれぞれで指定された色を、現在の環境のカラースキーム設定に応じて返します。