Javascriptで、body要素へのクラスの追加・削除でbody内全体のCSSを切り替える方法を知りたい

HTML,CSS,Javascriptを利用してWEBサイトを開発しています。

サイト内にダークモードと通常モードの切り替えのスイッチを作成し、選択の状況によって2種類の配色を使い分けたいです。

下記のサイトを参考にし、スイッチによって、body要素へ、classセレクターの追加、削除をする事はできたのですが、その後どのようにサイト全体にある要素へ,body要素の状態を反映させて配色を変更すれば良いかわからない状況です。
Webサイトをダークモードに対応させよう

試した事のところに書いているように、設定を変えたいクラスに条件を分ければ、切り替えれると思うのですが、クラスの数がたくさんあり、コードも複雑になり現実的ではないです。

body要素のクラスを1カ所のみ変更して、サイト全体でCSSの設定を変えるを知りたいのですが、ご存じの方おりましたら、ご教授いただけないでしょうか？

該当のソースコード

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    <div class="class1">
10      サンプルテキスト
11    </div>
12    <div class="class2">
13      サンプルテキスト
14    </div>
15    <div class="class3">
16      サンプルテキスト
17    </div>
18  </body>
19</html>
20

CSS
1/* bodyが"light-theme"の時に適用したい設定 */
2.class1 {
3  background: #fff;
4  color: #333;
5}
6.class2 {
7  background: #fff;
8  color: #333;
9}
10.class3 {
11  background: #fff;
12  color: #333;
13}
14
15/* bodyが"dark-theme"の時に適用したい設定 */
16.class1 {
17  background: #000;
18  color: #ddd;
19}
20.class2 {
21  background: #000;
22  color: #ddd;
23}
24.class3 {
25  background: #000;
26  color: #ddd;
27}

Javascript
1// チェックボックスの取得
2const btn = document.querySelector("#btn-mode");
3 
4// チェックした時の挙動
5btn.addEventListener("change", () => {
6  if (btn.checked == true) {
7    // ダークモード
8    document.body.classList.remove("light-theme");
9    document.body.classList.add("dark-theme");
10  } else {
11    // ライトモード
12    document.body.classList.remove("dark-theme");
13    document.body.classList.add("light-theme");
14  }
15});

試したこと

以下のように、設定を変えたいクラスに条件を分ければ、切り替えれると思うのですが、クラスの数がたくさんあり、コードも複雑になり現実的ではないです。

CSS
1.class1 .light-theme {
2  background: #fff;
3  color: #333;
4}
5.class1 .dark-theme {
6  background: #000;
7  color: #ddd
8}

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

回答2件

CSS Custom Propertiesとかを使うとかですかね

MDN

投稿2020/05/08 16:11

okina

総合スコア471

tomaa

2020/05/08 16:17

ご回答ありがとうございます。教えていただいた方法は、まだ試していませんので、これから試してみたいと思います。

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

ベストアンサー

このあたりでどうでしょう。

classを切り替えるのではなくlinkするCSS自体を差し替えてしまう
CSS変数で色替えをする

【CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

【CSS 変数 (カスタムプロパティ) の使い方とルール | murashun.jp】
https://murashun.jp/blog/20190201-01.html

【CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/css-variables

投稿2020/05/08 16:08

kei344

総合スコア69407

tomaa

2020/05/08 16:15

ご回答ありがとうございます。たくさん、アイデアをいただきありがとうございます。どれも試していたない方法ですので、これから試してみようと思います。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！