2つの値を1行で持つ

light-dark(明色, 暗色) と書くと、color-scheme の状態に応じてブラウザが選びます。@media (prefers-color-scheme: dark) のブロックを丸ごと書かずに済むので、変数定義がおよそ半分になります。

使う条件は color-scheme: light dark を宣言しておくこと。宣言が無いと常に明色側が選ばれます。手動切替と組み合わせるときも、color-scheme を上書きするだけで全変数が追従します。