KT MEDIA

やりたいこと

ダークモード時のカラーをscss変数で管理したい

CSS変数（カスタムプロパティ）をそのまま使う方法

prefers-color-schemeの中にダークモード時のカラーを指定します。

//ライトモード時
:root {
  --color-base: #fff;
  --color-primary: #333;
}

//ダークモード時
@media (prefers-color-scheme: dark) {
  :root {
    --color-base: #000;
    --color-primary: #ddd;
  }
}

css変数で呼び出し

//css変数を呼び出し
body {
  color: var(--color-primary);
  background-color: var(--color-base);
}

Scss変数で管理する方法

scss変数の中にcss変数を指定します。

//ライトモード時
:root {
  --color-base: #fff;
  --color-primary: #333;
}

//ダークモード時
@media (prefers-color-scheme: dark) {
  :root {
    --color-base: #000;
    --color-primary: #ddd;
  }
}

//scss変数に指定
$color-base: var(--color-base);
$color-primary: var(--color-primary);

scss変数で呼び出せるようになります。

//scss変数で呼び出せる
body {
  color: $color-primary;
  background-color: $color-base;
}