body要素のclassの条件によって、CSSの変数の値を変えたい

前提・実現したいこと

ダークモードと、ライトモード（一般的な表示）の切り替え可能なWEBサイトを開発しています。

下記のサイトを参考にしています。
CSSだけでWebサイトを簡単にダークモードに対応させる方法

現在、チェックボックスにより、ダークモードと、ライトモードを選択し、条件によってbody要素にclassが追加されるようになっています。

ダークモード選択時は　→　dark-theme　のclassが追加される。
ライトモード選択時は　→　light-theme　のclassが追加される。

このbody要素の違いを利用して、適応させるCSSの変数を変えるようにしたいです。

方法等ご存じの方おりましたら、ご教授いただけないでしょうか？

下記のCSSの内容ですと、[media (prefers-color-scheme: dark)]を利用して、CSSの変数を変更しています。

CSS
1:root {
2  --test: white;
3}
4
5@media (prefers-color-scheme: dark) {
6  :root {
7    --test: black;
8  }
9}
10
11.class1{
12   back-ground: var(--test);
13}

このCSSを改良して、bodyタグのセレクターとなっているclassによって、適応させるCSSの変数を変えるようにしたいです。
＊この書き方では切り替わりませんが、このような動作を目的にCSSを作りたいです。

CSS
1.light-theme {
2  :root {
3    --test: white;
4  }
5}
6
7.dark-theme {
8  :root {
9    --test: black;
10  }
11}
12
13.class1{
14   back-ground: var(--test);
15}

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7  </head>
8  <body>
9    <input id="btn-mode" type="checkbox"> ダークモード
10    <div class="class1">
11      サンプルテキスト
12    </div>
13    
14  </body>
15</html>

JavaScript
1const btn = document.querySelector("#btn-mode");
2 
3btn.addEventListener("change", () => {
4  if (btn.checked == true) {
5    document.body.classList.remove("light-theme");
6    document.body.classList.add("dark-theme");
7  } else {
8    document.body.classList.remove("dark-theme");
9    document.body.classList.add("light-theme");
10  }
11});

試したこと

Sccsで変数を使うように試しましたが、コンパイルの時点でエラーとなってしまいます。

scss
1$test: white;
2 
3.dark-theme {
4$test: black;
5}
6
7.class1{
8   back-ground: $test;
9}
10

okina

2020/05/09 06:59

SCSSでも可ですか？

tomaa

2020/05/09 07:01

コメントありがとうございます。はい、Saasを利用していますので、SCSS可です。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1:root {
2  --test: red;
3}
4
5.light-theme {
6  --test: green;
7}
8
9.dark-theme {
10  --test: blue;
11}
12
13.class1 {
14  background-color: var(--test);
15  width: 50vw;
16  height: 50vw;
17}
18```**動くサンプル：**[https://jsfiddle.net/m8uc91xn/](https://jsfiddle.net/m8uc91xn/)