前提・実現したいこと
ダークモードと、ライトモード(一般的な表示)の切り替え可能な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
回答1件
あなたの回答
tips
プレビュー