color-mix() でダークモードカラーシステム

1 つのブランド、2 つのテーマ

デザインシステムでよくある悩みは、ライトモード用とダークモード用の 2つのパレットを並行して維持することです。color-mix() を使えば、 ミキサーが引っ張る ベース を変えることで、両方を同じブランド色から 派生できます：

:root {
  --brand: #2563eb;
  --bg: white;
  --fg: #0a0a0a;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --fg: #fafafa;
}

/* --brand と --bg から派生したサーフェス */
.surface-1 { background: color-mix(in oklch, var(--brand) 4%, var(--bg)); }
.surface-2 { background: color-mix(in oklch, var(--brand) 8%, var(--bg)); }
.surface-3 { background: color-mix(in oklch, var(--brand) 12%, var(--bg)); }

ライトモードでは --bg が白なので、各サーフェスはブランドティント のかかったほぼ白色になります。ダークモードでは --bg がほぼ黒なので、 同じ式がブランドティントのかかったほぼ黒色を自動的に生成します。

--fg から押下/ホバー状態を派生

.button:hover {
  background: color-mix(in oklch, var(--brand), var(--fg) 12%);
}

ライトモードでは暗化 (前景が暗いため)、ダークモードでは明化 (前景が明るいため) します。1 つのルールで両テーマ対応です。

注意点

• 両テーマで結果のコントラストを必ず検証してください。彩度は近いまま でも明度は反転します。 アクセシビリティ カラーチェッカー で AA/AAA ペアを検証しましょう。
• 一部の色相系列 (黄色、シアン) は両テーマで均衡を取るために少し 異なる混合比率が必要です。比率は出発点として扱い、絶対視しないでください。