light-dark()関数

CSSのlight-dark()関数でライトモードとダークモードのスタイルを簡単に定義できて便利すぎる！
...
coliss.com
 
light-dark(<color>, <color>);

ライトモードとダークモードのどちらが使用されているかで色を変更するには、通常prefers-color-schemeメディアクエリを使用します。これを簡単にするために、CSSにはlight-dark()というユーティリティ関数が用意されています。

light-dark()関数は、2つの色の値を引数として受け取ります。ライトモードとダークモードのどちらを使用しているかに基づいて、1番目または2番目の引数をその要素に適用します。
light-dark()が機能するためには、最初にcolor-scheme宣言をしておきます。

/* old - メディアクエリ使用 */
:root {
  --text-color: #333; /* ライトモードの値 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ccc; /* ダークモードの値 */
  }
}

/* new - light-dark()関数使用 */
:root {
  color-scheme: light dark; /* 最初にcolor-scheme宣言 */
}
:root {
  /* ライトモードでは1番目の値、 ダークモードでは2番目の値を返します。 */
  --text-color: light-dark(#333, #ccc);
}

color-scheme宣言は、特定のモードに強制することもできます。

.dark {
  color-scheme: dark; /* この要素と子に対して、常にdarkを返します。 */
}

※現在のブラウザサポート状況
light-dark()関数のサポートブラウザ

inserted by FC2 system