Q&A
ご回答ありがとうございます。
たくさん、アイデアをいただきありがとうございます。
どれも試していたない方法ですので、これから試してみようと思います。
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件
0
ベストアンサー
このあたりでどうでしょう。
- 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
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/08 16:17