teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問body要素のclassの条件によって、CSSの変数の値を変えたい

編集履歴

質問編集履歴

2

内容修正

2020/05/09 14:13

投稿

tomaa
tomaa

スコア84

test CHANGED
File without changes
test CHANGED
@@ -12,9 +12,9 @@
12
12
 
13
13
  現在、チェックボックスにより、ダークモードと、ライトモードを選択し、条件によってbody要素にclassが追加されるようになっています。
14
14
 
15
- - ダークモード選択時は　→　darkTheme　のclassが追加される。
15
+ - ダークモード選択時は　→　dark-theme　のclassが追加される。
16
16
 
17
- - ライトモード選択時は　→　lightTheme　のclassが追加される。
17
+ - ライトモード選択時は　→　light-theme　のclassが追加される。
18
18
 
19
19
 
20
20
 

1

追記の記入

2020/05/09 14:13

投稿

tomaa
tomaa

スコア84

test CHANGED
@@ -1 +1 @@
1
- body要素のclassの条件によって適用するプロパティーの値を変えたい
1
+ body要素のclassの条件によって、CSSの変数の値を変えたい
test CHANGED
@@ -36,13 +36,7 @@
36
36
 
37
37
  :root {
38
38
 
39
- --main-text: #333;
39
+ --test: white;
40
-
41
- --back-ground: #efefef;
42
-
43
- --red: #c71f1f;
44
-
45
- --table-bg: #00ccd1;
46
40
 
47
41
  }
48
42
 
@@ -52,13 +46,7 @@
52
46
 
53
47
  :root {
54
48
 
55
- --main-text: #eee;
56
-
57
- --back-ground: #333;
58
-
59
- --red: #eb7a7a;
49
+ --test: black;
60
-
61
- --table-bg: #00686b;
62
50
 
63
51
  }
64
52
 
@@ -66,31 +54,9 @@
66
54
 
67
55
 
68
56
 
69
- body {
57
+ .class1{
70
58
 
71
- font-size: 62.5%;
72
-
73
- background: var(--back-ground);
59
+ back-ground: var(--test);
74
-
75
- }
76
-
77
-
78
-
79
- h1 {
80
-
81
- font-size: 2rem;
82
-
83
- color: var(--main-text);
84
-
85
- }
86
-
87
-
88
-
89
- p {
90
-
91
- font-size: 1.4rem;
92
-
93
- color: var(--main-text);
94
60
 
95
61
  }
96
62
 
@@ -100,73 +66,37 @@
100
66
 
101
67
  このCSSを改良して、bodyタグのセレクターとなっているclassによって、適応させるCSSの変数を変えるようにしたいです。
102
68
 
69
+ ＊この書き方では切り替わりませんが、このような動作を目的にCSSを作りたいです。
70
+
103
71
  ```CSS
104
72
 
105
- //デフォルトをライトモードの値で変数を作る
73
+ .light-theme {
106
74
 
75
+ :root {
107
76
 
77
+ --test: white;
108
78
 
109
- :root {
79
+ }
110
-
111
- --main-text: #333;
112
-
113
- --back-ground: #efefef;
114
-
115
- --red: #c71f1f;
116
-
117
- --table-bg: #00ccd1;
118
80
 
119
81
  }
120
82
 
121
83
 
122
84
 
123
- //この下の範囲を、@media (prefers-color-scheme: dark)という条件でなく、body要素のclassがdarkThemeの時として、変数を設定したい。
124
-
125
- @media (prefers-color-scheme: dark) {
85
+ .dark-theme {
126
86
 
127
87
  :root {
128
88
 
129
- --main-text: #eee;
130
-
131
- --back-ground: #333;
132
-
133
- --red: #eb7a7a;
89
+ --test: black;
134
-
135
- --table-bg: #00686b;
136
90
 
137
91
  }
138
92
 
139
93
  }
140
94
 
141
- //ここまで
142
95
 
143
96
 
97
+ .class1{
144
98
 
145
- body {
146
-
147
- font-size: 62.5%;
148
-
149
- background: var(--back-ground);
99
+ back-ground: var(--test);
150
-
151
- }
152
-
153
-
154
-
155
- h1 {
156
-
157
- font-size: 2rem;
158
-
159
- color: var(--main-text);
160
-
161
- }
162
-
163
-
164
-
165
- p {
166
-
167
- font-size: 1.4rem;
168
-
169
- color: var(--main-text);
170
100
 
171
101
  }
172
102
 
@@ -174,12 +104,90 @@
174
104
 
175
105
  ```html
176
106
 
177
- <body>
107
+ <!DOCTYPE html>
178
108
 
179
- <h1>タイトルだよ</h1>
109
+ <html lang="en">
180
110
 
181
- <p>本文だよ、ここは本文だよ！</p>
111
+ <head>
182
112
 
113
+ <meta charset="UTF-8" />
114
+
115
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
116
+
117
+ <title>Document</title>
118
+
119
+ </head>
120
+
121
+ <body>
122
+
123
+ <input id="btn-mode" type="checkbox"> ダークモード
124
+
125
+ <div class="class1">
126
+
127
+ サンプルテキスト
128
+
129
+ </div>
130
+
131
+
132
+
183
- </body>
133
+ </body>
134
+
135
+ </html>
184
136
 
185
137
  ```
138
+
139
+
140
+
141
+ ```JavaScript
142
+
143
+ const btn = document.querySelector("#btn-mode");
144
+
145
+
146
+
147
+ btn.addEventListener("change", () => {
148
+
149
+ if (btn.checked == true) {
150
+
151
+ document.body.classList.remove("light-theme");
152
+
153
+ document.body.classList.add("dark-theme");
154
+
155
+ } else {
156
+
157
+ document.body.classList.remove("dark-theme");
158
+
159
+ document.body.classList.add("light-theme");
160
+
161
+ }
162
+
163
+ });
164
+
165
+ ```
166
+
167
+ ### 試したこと
168
+
169
+ Sccsで変数を使うように試しましたが、コンパイルの時点でエラーとなってしまいます。
170
+
171
+ ```scss
172
+
173
+ $test: white;
174
+
175
+
176
+
177
+ .dark-theme {
178
+
179
+ $test: black;
180
+
181
+ }
182
+
183
+
184
+
185
+ .class1{
186
+
187
+ back-ground: $test;
188
+
189
+ }
190
+
191
+
192
+
193
+ ```