カスタムプロパティの基本
:root{--ink:#1e262d}のように定義し、var(--ink)で使います。実行時に値を差し替えられるのが、Sassなどの変数との違いです。var(--x,#000)のように、第2引数でフォールバック値も指定できます。
prefers-color-schemeで値を差し替える
@media(prefers-color-scheme:dark){:root{…}}の中で変数だけを再定義すると、すべてのスタイルが切り替わります。各所に色を直接書かず、変数に集約しておくことが前提です。
color-schemeも指定する
color-scheme: light dark を指定すると、入力欄やスクロールバーなどブラウザ標準の部品も、ダークモードに追従します。