light-dark()を使ったテーマカラー管理手法

light-dark()は、2つの色を関数にわたすことで、ユーザー環境に合わせてテーマカラーを変えることができる。また、メディアクエリのprefers-color-schemeを使わなくてもテーマを変更できる。

light-dark()の使い方

:root {
  /* カラースキームの定義 */
  color-scheme: light dark;
}
body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

/* prefers-color-schemeと違い、OSの環境に関わらずテーマを変更できる */
:root:has(input[value="dark"]:checked) {
  color-scheme: dark;
}
:root:has(input[value="light"]:checked) {
  color-scheme: light;
}

light-dark()を使ったカラー管理

light-dark()を使ってカラートークンをあらかじめ設定しておくことで、各コンポーネントで一貫したCSSカスタムプロパティが使えるため可読性が向上する。

:root {
  --color: light-dark(black, white);
  --background-color: light-dark(white, black);
  --primary-color: light-dark(blue, red);
  --secondary-color: light-dark(green, yellow);
}

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

button {
  background-color: var(--background-color);

  &.primary {
    color: var(--primary-color);
  }
  &.secondary {
    color: var(--secondary-color);
  }
}

デモ