my website at ewancroft.uk
Refactor and consolidate theme variables in CSS
Reorganized and consolidated theme definitions in variables.css by grouping all color variables for each theme (including dark and light modes) together. Removed redundant and scattered milestone color overrides, integrating them directly into each theme block. This improves maintainability and clarity of theme management.
+349
-570
+349
-570
src/lib/css/variables.css
+349
-570
src/lib/css/variables.css
···
1
-
/* Default green theme - dark mode */
2
-
:root {
3
-
font-family: "Recursive", sans-serif;
4
-
--background-color: #121c17;
5
-
--text-color: #d8e8d8;
6
-
--header-footer-bg: #1e2c23;
7
-
--button-bg: #2d4839;
8
-
--button-hover-bg: #3a5847;
9
-
--link-color: #6db880;
10
-
--link-hover-color: #8fd0a0;
11
-
--card-bg: #1e2c23;
12
-
}
13
1
14
-
/* Default green theme - light mode */
15
-
:root.light {
16
-
--background-color: #e0f5e8;
17
-
--text-color: #1e3026;
18
-
--header-footer-bg: #c8e6d2;
19
-
--button-bg: #5aaa76;
20
-
--button-hover-bg: #7bc293;
21
-
--link-color: #2a7d4b;
22
-
--link-hover-color: #1e5935;
23
-
--card-bg: #c8e6d2;
2
+
/* Amber theme */
3
+
:root.amber {
4
+
--background-color: #241c12;
5
+
--text-color: #f0e5d0;
6
+
--header-footer-bg: #382e1e;
7
+
--button-bg: #9c7830;
8
+
--button-hover-bg: #b89038;
9
+
--link-color: #e0b050;
10
+
--link-hover-color: #f0c878;
11
+
--card-bg: #382e1e;
12
+
--milestone-color-left: #9c7830;
13
+
--milestone-color-right: #e0b050;
14
+
}
15
+
:root.amber.light {
16
+
--background-color: #f8f0e0;
17
+
--text-color: #483c1e;
18
+
--header-footer-bg: #efe0c0;
19
+
--button-bg: #c09030;
20
+
--button-hover-bg: #d8a848;
21
+
--link-color: #8c6824;
22
+
--link-hover-color: #6a4c18;
23
+
--card-bg: #efe0c0;
24
+
--milestone-color-left: #c09030;
25
+
--milestone-color-right: #8c6824;
24
26
}
25
27
26
-
/* Blue theme - dark mode */
28
+
/* Blue theme */
27
29
:root.blue {
28
30
--background-color: #121a24;
29
31
--text-color: #d8e5f0;
···
33
35
--link-color: #6d9fd8;
34
36
--link-hover-color: #8fb8e6;
35
37
--card-bg: #1e2c3d;
38
+
--milestone-color-left: #2d4865;
39
+
--milestone-color-right: #6d9fd8;
36
40
}
37
-
38
-
/* Blue theme - light mode */
39
41
:root.blue.light {
40
42
--background-color: #e0eef8;
41
43
--text-color: #1e3048;
···
45
47
--link-color: #2a5d7d;
46
48
--link-hover-color: #1e4159;
47
49
--card-bg: #c8ddef;
50
+
--milestone-color-left: #5a8cc6;
51
+
--milestone-color-right: #2a5d7d;
48
52
}
49
53
50
-
/* Purple theme - dark mode */
51
-
:root.purple {
52
-
--background-color: #1a1424;
53
-
--text-color: #e5d8f0;
54
-
--header-footer-bg: #2c1e3d;
55
-
--button-bg: #482d65;
56
-
--button-hover-bg: #5c3a80;
57
-
--link-color: #a06dd8;
58
-
--link-hover-color: #b88fe6;
59
-
--card-bg: #2c1e3d;
60
-
}
61
-
62
-
/* Purple theme - light mode */
63
-
:root.purple.light {
64
-
--background-color: #eee0f8;
65
-
--text-color: #301e48;
66
-
--header-footer-bg: #ddc8ef;
67
-
--button-bg: #8c5ac6;
68
-
--button-hover-bg: #a67bd8;
69
-
--link-color: #5d2a7d;
70
-
--link-hover-color: #411e59;
71
-
--card-bg: #ddc8ef;
72
-
}
73
-
74
-
/* High contrast theme - dark mode (accessibility) */
75
-
:root.high-contrast {
76
-
--background-color: #101010;
77
-
--text-color: #f0f0f0;
78
-
--header-footer-bg: #202020;
79
-
--button-bg: #0066cc;
80
-
--button-hover-bg: #0052a3;
81
-
--link-color: #00ccff;
82
-
--link-hover-color: #66e0ff;
83
-
--card-bg: #202020;
84
-
}
85
-
86
-
/* High contrast theme - light mode (accessibility) */
87
-
:root.high-contrast.light {
88
-
--background-color: #f0f0f0;
89
-
--text-color: #101010;
90
-
--header-footer-bg: #e0e0e0;
91
-
--button-bg: #0066cc;
92
-
--button-hover-bg: #0052a3;
93
-
--link-color: #0000cc;
94
-
--link-hover-color: #000099;
95
-
--card-bg: #e0e0e0;
96
-
}
97
-
98
-
/* Bubblegum theme - dark mode */
54
+
/* Bubblegum theme */
99
55
:root.bubblegum {
100
56
--background-color: #241824;
101
57
--text-color: #f0d8e5;
···
105
61
--link-color: #f07ab6;
106
62
--link-hover-color: #f8a6cc;
107
63
--card-bg: #3d1e2c;
64
+
--milestone-color-left: #c13d7a;
65
+
--milestone-color-right: #f07ab6;
108
66
}
109
-
110
-
/* Bubblegum theme - light mode */
111
67
:root.bubblegum.light {
112
68
--background-color: #f8e0ec;
113
69
--text-color: #481e36;
···
117
73
--link-color: #c13d7a;
118
74
--link-hover-color: #a32e65;
119
75
--card-bg: #efc8d8;
120
-
}
121
-
122
-
/* Slate theme - dark mode */
123
-
:root.slate {
124
-
--background-color: #1e2328;
125
-
--text-color: #dde3e8;
126
-
--header-footer-bg: #2a3038;
127
-
--button-bg: #455060;
128
-
--button-hover-bg: #566275;
129
-
--link-color: #7da1c6;
130
-
--link-hover-color: #a3c0db;
131
-
--card-bg: #2a3038;
76
+
--milestone-color-left: #d65a93;
77
+
--milestone-color-right: #c13d7a;
132
78
}
133
79
134
-
/* Slate theme - light mode */
135
-
:root.slate.light {
136
-
--background-color: #edf2f7;
137
-
--text-color: #2d3748;
138
-
--header-footer-bg: #dae1e9;
139
-
--button-bg: #5a6c87;
140
-
--button-hover-bg: #7889a3;
141
-
--link-color: #3a4a5e;
142
-
--link-hover-color: #2d3748;
143
-
--card-bg: #dae1e9;
80
+
/* Charcoal theme */
81
+
:root.charcoal {
82
+
--background-color: #1a1c1e;
83
+
--text-color: #d8dcde;
84
+
--header-footer-bg: #282c30;
85
+
--button-bg: #485058;
86
+
--button-hover-bg: #586068;
87
+
--link-color: #90a0b0;
88
+
--link-hover-color: #b0c0d0;
89
+
--card-bg: #282c30;
90
+
--milestone-color-left: #485058;
91
+
--milestone-color-right: #90a0b0;
144
92
}
145
-
146
-
/* Sand theme - dark mode */
147
-
:root.sand {
148
-
--background-color: #24201c;
149
-
--text-color: #e8e0d0;
150
-
--header-footer-bg: #38302a;
151
-
--button-bg: #7d6a4d;
152
-
--button-hover-bg: #96815f;
153
-
--link-color: #c9a96c;
154
-
--link-hover-color: #d8bf8c;
155
-
--card-bg: #38302a;
93
+
:root.charcoal.light {
94
+
--background-color: #eef0f2;
95
+
--text-color: #282c30;
96
+
--header-footer-bg: #dce0e4;
97
+
--button-bg: #586068;
98
+
--button-hover-bg: #687078;
99
+
--link-color: #384048;
100
+
--link-hover-color: #282c30;
101
+
--card-bg: #dce0e4;
102
+
--milestone-color-left: #586068;
103
+
--milestone-color-right: #384048;
156
104
}
157
105
158
-
/* Sand theme - light mode */
159
-
:root.sand.light {
160
-
--background-color: #f5efe2;
161
-
--text-color: #483a28;
162
-
--header-footer-bg: #e8dcc8;
163
-
--button-bg: #b09060;
164
-
--button-hover-bg: #c5a87c;
165
-
--link-color: #7d6a4d;
166
-
--link-hover-color: #5a4c38;
167
-
--card-bg: #e8dcc8;
106
+
/* Coral theme */
107
+
:root.coral {
108
+
--background-color: #241812;
109
+
--text-color: #f0dcd8;
110
+
--header-footer-bg: #38241e;
111
+
--button-bg: #c05a48;
112
+
--button-hover-bg: #d87058;
113
+
--link-color: #ff9e80;
114
+
--link-hover-color: #ffb8a0;
115
+
--card-bg: #38241e;
116
+
--milestone-color-left: #c05a48;
117
+
--milestone-color-right: #ff9e80;
168
118
}
169
-
170
-
/* Ocean theme - dark mode */
171
-
:root.ocean {
172
-
--background-color: #121c24;
173
-
--text-color: #d8e5f0;
174
-
--header-footer-bg: #1e2c38;
175
-
--button-bg: #1e6080;
176
-
--button-hover-bg: #2a7a9c;
177
-
--link-color: #4da6c9;
178
-
--link-hover-color: #7bc0db;
179
-
--card-bg: #1e2c38;
119
+
:root.coral.light {
120
+
--background-color: #f8ece8;
121
+
--text-color: #482418;
122
+
--header-footer-bg: #efd8d0;
123
+
--button-bg: #e07860;
124
+
--button-hover-bg: #f09078;
125
+
--link-color: #c05a48;
126
+
--link-hover-color: #9c3828;
127
+
--card-bg: #efd8d0;
128
+
--milestone-color-left: #e07860;
129
+
--milestone-color-right: #c05a48;
180
130
}
181
131
182
-
/* Ocean theme - light mode */
183
-
:root.ocean.light {
184
-
--background-color: #e0f0f8;
185
-
--text-color: #1e3648;
186
-
--header-footer-bg: #c8e0ef;
187
-
--button-bg: #2a7a9c;
188
-
--button-hover-bg: #4da6c9;
189
-
--link-color: #1e6080;
190
-
--link-hover-color: #0a3142;
191
-
--card-bg: #c8e0ef;
192
-
}
193
-
194
-
/* Sunset theme - dark mode */
195
-
:root.sunset {
196
-
--background-color: #24181c;
197
-
--text-color: #f0dcd8;
198
-
--header-footer-bg: #382a28;
199
-
--button-bg: #a34038;
200
-
--button-hover-bg: #bf5048;
201
-
--link-color: #f07050;
202
-
--link-hover-color: #f89070;
203
-
--card-bg: #382a28;
132
+
/* Default green theme */
133
+
:root {
134
+
font-family: "Recursive", sans-serif;
135
+
--background-color: #121c17;
136
+
--text-color: #d8e8d8;
137
+
--header-footer-bg: #1e2c23;
138
+
--button-bg: #2d4839;
139
+
--button-hover-bg: #3a5847;
140
+
--link-color: #6db880;
141
+
--link-hover-color: #8fd0a0;
142
+
--card-bg: #1e2c23;
143
+
--milestone-color-left: #2d4839;
144
+
--milestone-color-right: #6db880;
204
145
}
205
-
206
-
/* Sunset theme - light mode */
207
-
:root.sunset.light {
208
-
--background-color: #f8e8e4;
209
-
--text-color: #482824;
210
-
--header-footer-bg: #efd4cc;
211
-
--button-bg: #c65a48;
212
-
--button-hover-bg: #d87a68;
213
-
--link-color: #a34038;
214
-
--link-hover-color: #7d2820;
215
-
--card-bg: #efd4cc;
146
+
:root.light {
147
+
--background-color: #e0f5e8;
148
+
--text-color: #1e3026;
149
+
--header-footer-bg: #c8e6d2;
150
+
--button-bg: #5aaa76;
151
+
--button-hover-bg: #7bc293;
152
+
--link-color: #2a7d4b;
153
+
--link-hover-color: #1e5935;
154
+
--card-bg: #c8e6d2;
155
+
--milestone-color-left: #5aaa76;
156
+
--milestone-color-right: #2a7d4b;
216
157
}
217
158
218
-
/* Werewolf theme - dark mode */
219
-
:root.werewolf {
220
-
--background-color: #1a1a1a;
159
+
/* High contrast theme */
160
+
:root.high-contrast {
161
+
--background-color: #101010;
221
162
--text-color: #f0f0f0;
222
-
--header-footer-bg: #2a2a2a;
223
-
--button-bg: #8b0000;
224
-
--button-hover-bg: #a00000;
225
-
--link-color: #ff4500;
226
-
--link-hover-color: #ff6347;
227
-
--card-bg: #2a2a2a;
163
+
--header-footer-bg: #202020;
164
+
--button-bg: #0066cc;
165
+
--button-hover-bg: #0052a3;
166
+
--link-color: #00ccff;
167
+
--link-hover-color: #66e0ff;
168
+
--card-bg: #202020;
169
+
--milestone-color-left: #0066cc;
170
+
--milestone-color-right: #00ccff;
228
171
}
229
-
230
-
/* Werewolf theme - light mode */
231
-
:root.werewolf.light {
172
+
:root.high-contrast.light {
232
173
--background-color: #f0f0f0;
233
-
--text-color: #1a1a1a;
174
+
--text-color: #101010;
234
175
--header-footer-bg: #e0e0e0;
235
-
--button-bg: #a00000;
236
-
--button-hover-bg: #b50000;
237
-
--link-color: #cc3300;
238
-
--link-hover-color: #e64d1a;
176
+
--button-bg: #0066cc;
177
+
--button-hover-bg: #0052a3;
178
+
--link-color: #0000cc;
179
+
--link-hover-color: #000099;
239
180
--card-bg: #e0e0e0;
181
+
--milestone-color-left: #0066cc;
182
+
--milestone-color-right: #0000cc;
240
183
}
241
184
242
-
/* Sunset theme - light mode */
243
-
:root.sunset.light {
244
-
--background-color: #f8e8e4;
245
-
--text-color: #482824;
246
-
--header-footer-bg: #efd4cc;
247
-
--button-bg: #c65a48;
248
-
--button-hover-bg: #d87a68;
249
-
--link-color: #a34038;
250
-
--link-hover-color: #7d2820;
251
-
--card-bg: #efd4cc;
185
+
/* Indigo theme */
186
+
:root.indigo {
187
+
--background-color: #181a30;
188
+
--text-color: #d8daf0;
189
+
--header-footer-bg: #242648;
190
+
--button-bg: #3a3d80;
191
+
--button-hover-bg: #484c9c;
192
+
--link-color: #7a80e0;
193
+
--link-hover-color: #9ca0f0;
194
+
--card-bg: #242648;
195
+
--milestone-color-left: #3a3d80;
196
+
--milestone-color-right: #7a80e0;
252
197
}
253
-
254
-
/* Mint theme - dark mode */
255
-
:root.mint {
256
-
--background-color: #12241c;
257
-
--text-color: #d8f0e5;
258
-
--header-footer-bg: #1e382c;
259
-
--button-bg: #2a9c80;
260
-
--button-hover-bg: #38bf9c;
261
-
--link-color: #60d0b0;
262
-
--link-hover-color: #8ce0c6;
263
-
--card-bg: #1e382c;
264
-
}
265
-
266
-
/* Mint theme - light mode */
267
-
:root.mint.light {
268
-
--background-color: #e0f8f0;
269
-
--text-color: #1e4838;
270
-
--header-footer-bg: #c8efd8;
271
-
--button-bg: #38bf9c;
272
-
--button-hover-bg: #60d0b0;
273
-
--link-color: #0a8c73;
274
-
--link-hover-color: #066352;
275
-
--card-bg: #c8efd8;
198
+
:root.indigo.light {
199
+
--background-color: #e8eaf8;
200
+
--text-color: #242648;
201
+
--header-footer-bg: #d0d4ef;
202
+
--button-bg: #484c9c;
203
+
--button-hover-bg: #6a70c0;
204
+
--link-color: #3a3d80;
205
+
--link-hover-color: #242648;
206
+
--card-bg: #d0d4ef;
207
+
--milestone-color-left: #484c9c;
208
+
--milestone-color-right: #3a3d80;
276
209
}
277
210
278
-
/* Lavender theme - dark mode */
211
+
/* Lavender theme */
279
212
:root.lavender {
280
213
--background-color: #1c1824;
281
214
--text-color: #e5d8f0;
···
285
218
--link-color: #a890e0;
286
219
--link-hover-color: #c0aef0;
287
220
--card-bg: #2c2438;
221
+
--milestone-color-left: #604d9c;
222
+
--milestone-color-right: #a890e0;
288
223
}
289
-
290
-
/* Lavender theme - light mode */
291
224
:root.lavender.light {
292
225
--background-color: #f0e8f8;
293
226
--text-color: #362448;
···
297
230
--link-color: #604d9c;
298
231
--link-hover-color: #483878;
299
232
--card-bg: #e0d4ef;
233
+
--milestone-color-left: #7660bf;
234
+
--milestone-color-right: #604d9c;
300
235
}
301
236
302
-
/* Low contrast theme - dark mode (accessibility) */
237
+
/* Low contrast theme */
303
238
:root.low-contrast {
304
239
--background-color: #303030;
305
240
--text-color: #b0b0b0;
···
309
244
--link-color: #909090;
310
245
--link-hover-color: #a0a0a0;
311
246
--card-bg: #404040;
247
+
--milestone-color-left: #606060;
248
+
--milestone-color-right: #909090;
312
249
}
313
-
314
-
/* Low contrast theme - light mode (accessibility) */
315
250
:root.low-contrast.light {
316
251
--background-color: #d0d0d0;
317
252
--text-color: #505050;
···
321
256
--link-color: #606060;
322
257
--link-hover-color: #505050;
323
258
--card-bg: #c0c0c0;
259
+
--milestone-color-left: #909090;
260
+
--milestone-color-right: #606060;
324
261
}
325
262
326
-
/* Amber theme - dark mode */
327
-
:root.amber {
328
-
--background-color: #241c12;
329
-
--text-color: #f0e5d0;
330
-
--header-footer-bg: #382e1e;
331
-
--button-bg: #9c7830;
332
-
--button-hover-bg: #b89038;
333
-
--link-color: #e0b050;
334
-
--link-hover-color: #f0c878;
335
-
--card-bg: #382e1e;
263
+
/* Mint theme */
264
+
:root.mint {
265
+
--background-color: #12241c;
266
+
--text-color: #d8f0e5;
267
+
--header-footer-bg: #1e382c;
268
+
--button-bg: #2a9c80;
269
+
--button-hover-bg: #38bf9c;
270
+
--link-color: #60d0b0;
271
+
--link-hover-color: #8ce0c6;
272
+
--card-bg: #1e382c;
273
+
--milestone-color-left: #2a9c80;
274
+
--milestone-color-right: #60d0b0;
336
275
}
337
-
338
-
/* Amber theme - light mode */
339
-
:root.amber.light {
340
-
--background-color: #f8f0e0;
341
-
--text-color: #483c1e;
342
-
--header-footer-bg: #efe0c0;
343
-
--button-bg: #c09030;
344
-
--button-hover-bg: #d8a848;
345
-
--link-color: #8c6824;
346
-
--link-hover-color: #6a4c18;
347
-
--card-bg: #efe0c0;
276
+
:root.mint.light {
277
+
--background-color: #e0f8f0;
278
+
--text-color: #1e4838;
279
+
--header-footer-bg: #c8efd8;
280
+
--button-bg: #38bf9c;
281
+
--button-hover-bg: #60d0b0;
282
+
--link-color: #0a8c73;
283
+
--link-hover-color: #066352;
284
+
--card-bg: #c8efd8;
285
+
--milestone-color-left: #38bf9c;
286
+
--milestone-color-right: #0a8c73;
348
287
}
349
288
350
-
/* Teal theme - dark mode */
351
-
:root.teal {
352
-
--background-color: #122420;
353
-
--text-color: #d0ece8;
354
-
--header-footer-bg: #1e3834;
355
-
--button-bg: #1e7d78;
356
-
--button-hover-bg: #289994;
357
-
--link-color: #4cc5c0;
358
-
--link-hover-color: #78d8d4;
359
-
--card-bg: #1e3834;
289
+
/* Ocean theme */
290
+
:root.ocean {
291
+
--background-color: #121c24;
292
+
--text-color: #d8e5f0;
293
+
--header-footer-bg: #1e2c38;
294
+
--button-bg: #1e6080;
295
+
--button-hover-bg: #2a7a9c;
296
+
--link-color: #4da6c9;
297
+
--link-hover-color: #7bc0db;
298
+
--card-bg: #1e2c38;
299
+
--milestone-color-left: #1e6080;
300
+
--milestone-color-right: #4da6c9;
360
301
}
361
-
362
-
/* Teal theme - light mode */
363
-
:root.teal.light {
364
-
--background-color: #e0f5f2;
365
-
--text-color: #1e3c38;
366
-
--header-footer-bg: #c8e8e4;
367
-
--button-bg: #289994;
368
-
--button-hover-bg: #4cc5c0;
369
-
--link-color: #1e7d78;
370
-
--link-hover-color: #0a5c58;
371
-
--card-bg: #c8e8e4;
302
+
:root.ocean.light {
303
+
--background-color: #e0f0f8;
304
+
--text-color: #1e3648;
305
+
--header-footer-bg: #c8e0ef;
306
+
--button-bg: #2a7a9c;
307
+
--button-hover-bg: #4da6c9;
308
+
--link-color: #1e6080;
309
+
--link-hover-color: #0a3142;
310
+
--card-bg: #c8e0ef;
311
+
--milestone-color-left: #2a7a9c;
312
+
--milestone-color-right: #1e6080;
372
313
}
373
314
374
-
/* Olive theme - dark mode */
315
+
/* Olive theme */
375
316
:root.olive {
376
317
--background-color: #1c2412;
377
318
--text-color: #e0ecd0;
···
381
322
--link-color: #a0cc60;
382
323
--link-hover-color: #bce084;
383
324
--card-bg: #2c381e;
325
+
--milestone-color-left: #5a7d30;
326
+
--milestone-color-right: #a0cc60;
384
327
}
385
-
386
-
/* Olive theme - light mode */
387
328
:root.olive.light {
388
329
--background-color: #f0f5e0;
389
330
--text-color: #38481e;
···
393
334
--link-color: #5a7d30;
394
335
--link-hover-color: #3c5c18;
395
336
--card-bg: #e0eac8;
337
+
--milestone-color-left: #6c9438;
338
+
--milestone-color-right: #5a7d30;
396
339
}
397
340
398
-
/* Indigo theme - dark mode */
399
-
:root.indigo {
400
-
--background-color: #181a30;
401
-
--text-color: #d8daf0;
402
-
--header-footer-bg: #242648;
403
-
--button-bg: #3a3d80;
404
-
--button-hover-bg: #484c9c;
405
-
--link-color: #7a80e0;
406
-
--link-hover-color: #9ca0f0;
407
-
--card-bg: #242648;
341
+
/* Purple theme */
342
+
:root.purple {
343
+
--background-color: #1a1424;
344
+
--text-color: #e5d8f0;
345
+
--header-footer-bg: #2c1e3d;
346
+
--button-bg: #482d65;
347
+
--button-hover-bg: #5c3a80;
348
+
--link-color: #a06dd8;
349
+
--link-hover-color: #b88fe6;
350
+
--card-bg: #2c1e3d;
351
+
--milestone-color-left: #482d65;
352
+
--milestone-color-right: #a06dd8;
408
353
}
409
-
410
-
/* Indigo theme - light mode */
411
-
:root.indigo.light {
412
-
--background-color: #e8eaf8;
413
-
--text-color: #242648;
414
-
--header-footer-bg: #d0d4ef;
415
-
--button-bg: #484c9c;
416
-
--button-hover-bg: #6a70c0;
417
-
--link-color: #3a3d80;
418
-
--link-hover-color: #242648;
419
-
--card-bg: #d0d4ef;
354
+
:root.purple.light {
355
+
--background-color: #eee0f8;
356
+
--text-color: #301e48;
357
+
--header-footer-bg: #ddc8ef;
358
+
--button-bg: #8c5ac6;
359
+
--button-hover-bg: #a67bd8;
360
+
--link-color: #5d2a7d;
361
+
--link-hover-color: #411e59;
362
+
--card-bg: #ddc8ef;
363
+
--milestone-color-left: #8c5ac6;
364
+
--milestone-color-right: #5d2a7d;
420
365
}
421
366
422
-
/* Coral theme - dark mode */
423
-
:root.coral {
424
-
--background-color: #241812;
425
-
--text-color: #f0dcd8;
426
-
--header-footer-bg: #38241e;
427
-
--button-bg: #c05a48;
428
-
--button-hover-bg: #d87058;
429
-
--link-color: #ff9e80;
430
-
--link-hover-color: #ffb8a0;
431
-
--card-bg: #38241e;
432
-
}
433
-
434
-
/* Coral theme - light mode */
435
-
:root.coral.light {
436
-
--background-color: #f8ece8;
437
-
--text-color: #482418;
438
-
--header-footer-bg: #efd8d0;
439
-
--button-bg: #e07860;
440
-
--button-hover-bg: #f09078;
441
-
--link-color: #c05a48;
442
-
--link-hover-color: #9c3828;
443
-
--card-bg: #efd8d0;
444
-
}
445
-
446
-
/* Charcoal theme - dark mode */
447
-
:root.charcoal {
448
-
--background-color: #1a1c1e;
449
-
--text-color: #d8dcde;
450
-
--header-footer-bg: #282c30;
451
-
--button-bg: #485058;
452
-
--button-hover-bg: #586068;
453
-
--link-color: #90a0b0;
454
-
--link-hover-color: #b0c0d0;
455
-
--card-bg: #282c30;
456
-
}
457
-
458
-
/* Charcoal theme - light mode */
459
-
:root.charcoal.light {
460
-
--background-color: #eef0f2;
461
-
--text-color: #282c30;
462
-
--header-footer-bg: #dce0e4;
463
-
--button-bg: #586068;
464
-
--button-hover-bg: #687078;
465
-
--link-color: #384048;
466
-
--link-hover-color: #282c30;
467
-
--card-bg: #dce0e4;
468
-
}
469
-
470
-
/* Rose/Crimson theme - dark mode */
367
+
/* Rose/Crimson theme */
471
368
:root.rose {
472
369
--background-color: #241218;
473
370
--text-color: #f0d8dc;
···
477
374
--link-color: #d86070;
478
375
--link-hover-color: #e88090;
479
376
--card-bg: #381e24;
377
+
--milestone-color-left: #9c2838;
378
+
--milestone-color-right: #d86070;
480
379
}
481
-
482
-
/* Rose/Crimson theme - light mode */
483
380
:root.rose.light {
484
381
--background-color: #f8e4e8;
485
382
--text-color: #482428;
···
489
386
--link-color: #9c2838;
490
387
--link-hover-color: #7d1e2b;
491
388
--card-bg: #efd0d8;
492
-
}
493
-
494
-
/* Wood theme - dark mode */
495
-
:root.wood {
496
-
--background-color: #201a14;
497
-
--text-color: #e8dcd0;
498
-
--header-footer-bg: #342b20;
499
-
--button-bg: #6b4c33;
500
-
--button-hover-bg: #7d5a3d;
501
-
--link-color: #c49a6c;
502
-
--link-hover-color: #d8b48c;
503
-
--card-bg: #342b20;
389
+
--milestone-color-left: #b83848;
390
+
--milestone-color-right: #9c2838;
504
391
}
505
392
506
-
/* Wood theme - light mode */
507
-
:root.wood.light {
508
-
--background-color: #f5efe6;
509
-
--text-color: #3c2a1c;
510
-
--header-footer-bg: #e6d7c3;
511
-
--button-bg: #8c6240;
512
-
--button-hover-bg: #a07a54;
513
-
--link-color: #6b4c33;
514
-
--link-hover-color: #4d3520;
515
-
--card-bg: #e6d7c3;
516
-
}
517
-
518
-
/* Default green theme - dark mode */
519
-
:root {
520
-
--milestone-color-left: #2d4839;
521
-
--milestone-color-right: #6db880;
393
+
/* Sand theme */
394
+
:root.sand {
395
+
--background-color: #24201c;
396
+
--text-color: #e8e0d0;
397
+
--header-footer-bg: #38302a;
398
+
--button-bg: #7d6a4d;
399
+
--button-hover-bg: #96815f;
400
+
--link-color: #c9a96c;
401
+
--link-hover-color: #d8bf8c;
402
+
--card-bg: #38302a;
403
+
--milestone-color-left: #7d6a4d;
404
+
--milestone-color-right: #c9a96c;
522
405
}
523
-
524
-
/* Default green theme - light mode */
525
-
:root.light {
526
-
--milestone-color-left: #5aaa76;
527
-
--milestone-color-right: #2a7d4b;
406
+
:root.sand.light {
407
+
--background-color: #f5efe2;
408
+
--text-color: #483a28;
409
+
--header-footer-bg: #e8dcc8;
410
+
--button-bg: #b09060;
411
+
--button-hover-bg: #c5a87c;
412
+
--link-color: #7d6a4d;
413
+
--link-hover-color: #5a4c38;
414
+
--card-bg: #e8dcc8;
415
+
--milestone-color-left: #b09060;
416
+
--milestone-color-right: #7d6a4d;
528
417
}
529
418
530
-
/* Blue theme - dark mode */
531
-
:root.blue {
532
-
--milestone-color-left: #2d4865;
533
-
--milestone-color-right: #6d9fd8;
534
-
}
535
-
536
-
/* Blue theme - light mode */
537
-
:root.blue.light {
538
-
--milestone-color-left: #5a8cc6;
539
-
--milestone-color-right: #2a5d7d;
540
-
}
541
-
542
-
/* Purple theme - dark mode */
543
-
:root.purple {
544
-
--milestone-color-left: #482d65;
545
-
--milestone-color-right: #a06dd8;
546
-
}
547
-
548
-
/* Purple theme - light mode */
549
-
:root.purple.light {
550
-
--milestone-color-left: #8c5ac6;
551
-
--milestone-color-right: #5d2a7d;
552
-
}
553
-
554
-
/* High contrast theme - dark mode */
555
-
:root.high-contrast {
556
-
--milestone-color-left: #0066cc;
557
-
--milestone-color-right: #00ccff;
558
-
}
559
-
560
-
/* High contrast theme - light mode */
561
-
:root.high-contrast.light {
562
-
--milestone-color-left: #0066cc;
563
-
--milestone-color-right: #0000cc;
564
-
}
565
-
566
-
/* Bubblegum theme - dark mode */
567
-
:root.bubblegum {
568
-
--milestone-color-left: #c13d7a;
569
-
--milestone-color-right: #f07ab6;
570
-
}
571
-
572
-
/* Bubblegum theme - light mode */
573
-
:root.bubblegum.light {
574
-
--milestone-color-left: #d65a93;
575
-
--milestone-color-right: #c13d7a;
576
-
}
577
-
578
-
/* Slate theme - dark mode */
419
+
/* Slate theme */
579
420
:root.slate {
421
+
--background-color: #1e2328;
422
+
--text-color: #dde3e8;
423
+
--header-footer-bg: #2a3038;
424
+
--button-bg: #455060;
425
+
--button-hover-bg: #566275;
426
+
--link-color: #7da1c6;
427
+
--link-hover-color: #a3c0db;
428
+
--card-bg: #2a3038;
580
429
--milestone-color-left: #455060;
581
430
--milestone-color-right: #7da1c6;
582
431
}
583
-
584
-
/* Slate theme - light mode */
585
432
:root.slate.light {
433
+
--background-color: #edf2f7;
434
+
--text-color: #2d3748;
435
+
--header-footer-bg: #dae1e9;
436
+
--button-bg: #5a6c87;
437
+
--button-hover-bg: #7889a3;
438
+
--link-color: #3a4a5e;
439
+
--link-hover-color: #2d3748;
440
+
--card-bg: #dae1e9;
586
441
--milestone-color-left: #5a6c87;
587
442
--milestone-color-right: #3a4a5e;
588
443
}
589
444
590
-
/* Sand theme - dark mode */
591
-
:root.sand {
592
-
--milestone-color-left: #7d6a4d;
593
-
--milestone-color-right: #c9a96c;
594
-
}
595
-
596
-
/* Sand theme - light mode */
597
-
:root.sand.light {
598
-
--milestone-color-left: #b09060;
599
-
--milestone-color-right: #7d6a4d;
600
-
}
601
-
602
-
/* Ocean theme - dark mode */
603
-
:root.ocean {
604
-
--milestone-color-left: #1e6080;
605
-
--milestone-color-right: #4da6c9;
606
-
}
607
-
608
-
/* Ocean theme - light mode */
609
-
:root.ocean.light {
610
-
--milestone-color-left: #2a7a9c;
611
-
--milestone-color-right: #1e6080;
612
-
}
613
-
614
-
/* Sunset theme - dark mode */
445
+
/* Sunset theme */
615
446
:root.sunset {
447
+
--background-color: #24181c;
448
+
--text-color: #f0dcd8;
449
+
--header-footer-bg: #382a28;
450
+
--button-bg: #a34038;
451
+
--button-hover-bg: #bf5048;
452
+
--link-color: #f07050;
453
+
--link-hover-color: #f89070;
454
+
--card-bg: #382a28;
616
455
--milestone-color-left: #a34038;
617
456
--milestone-color-right: #f07050;
618
457
}
619
-
620
-
/* Sunset theme - light mode */
621
458
:root.sunset.light {
459
+
--background-color: #f8e8e4;
460
+
--text-color: #482824;
461
+
--header-footer-bg: #efd4cc;
462
+
--button-bg: #c65a48;
463
+
--button-hover-bg: #d87a68;
464
+
--link-color: #a34038;
465
+
--link-hover-color: #7d2820;
466
+
--card-bg: #efd4cc;
622
467
--milestone-color-left: #c65a48;
623
468
--milestone-color-right: #a34038;
624
469
}
625
470
626
-
/* Werewolf theme - dark mode */
627
-
:root.werewolf {
628
-
--milestone-color-left: #8b0000;
629
-
--milestone-color-right: #ff4500;
630
-
}
631
-
632
-
/* Werewolf theme - light mode */
633
-
:root.werewolf.light {
634
-
--milestone-color-left: #a00000;
635
-
--milestone-color-right: #cc3300;
636
-
}
637
-
638
-
/* Mint theme - dark mode */
639
-
:root.mint {
640
-
--milestone-color-left: #2a9c80;
641
-
--milestone-color-right: #60d0b0;
642
-
}
643
-
644
-
/* Mint theme - light mode */
645
-
:root.mint.light {
646
-
--milestone-color-left: #38bf9c;
647
-
--milestone-color-right: #0a8c73;
648
-
}
649
-
650
-
/* Lavender theme - dark mode */
651
-
:root.lavender {
652
-
--milestone-color-left: #604d9c;
653
-
--milestone-color-right: #a890e0;
654
-
}
655
-
656
-
/* Lavender theme - light mode */
657
-
:root.lavender.light {
658
-
--milestone-color-left: #7660bf;
659
-
--milestone-color-right: #604d9c;
660
-
}
661
-
662
-
/* Low contrast theme - dark mode */
663
-
:root.low-contrast {
664
-
--milestone-color-left: #606060;
665
-
--milestone-color-right: #909090;
666
-
}
667
-
668
-
/* Low contrast theme - light mode */
669
-
:root.low-contrast.light {
670
-
--milestone-color-left: #909090;
671
-
--milestone-color-right: #606060;
672
-
}
673
-
674
-
/* Amber theme - dark mode */
675
-
:root.amber {
676
-
--milestone-color-left: #9c7830;
677
-
--milestone-color-right: #e0b050;
678
-
}
679
-
680
-
/* Amber theme - light mode */
681
-
:root.amber.light {
682
-
--milestone-color-left: #c09030;
683
-
--milestone-color-right: #8c6824;
684
-
}
685
-
686
-
/* Teal theme - dark mode */
471
+
/* Teal theme */
687
472
:root.teal {
473
+
--background-color: #122420;
474
+
--text-color: #d0ece8;
475
+
--header-footer-bg: #1e3834;
476
+
--button-bg: #1e7d78;
477
+
--button-hover-bg: #289994;
478
+
--link-color: #4cc5c0;
479
+
--link-hover-color: #78d8d4;
480
+
--card-bg: #1e3834;
688
481
--milestone-color-left: #1e7d78;
689
482
--milestone-color-right: #4cc5c0;
690
483
}
691
-
692
-
/* Teal theme - light mode */
693
484
:root.teal.light {
485
+
--background-color: #e0f5f2;
486
+
--text-color: #1e3c38;
487
+
--header-footer-bg: #c8e8e4;
488
+
--button-bg: #289994;
489
+
--button-hover-bg: #4cc5c0;
490
+
--link-color: #1e7d78;
491
+
--link-hover-color: #0a5c58;
492
+
--card-bg: #c8e8e4;
694
493
--milestone-color-left: #289994;
695
494
--milestone-color-right: #1e7d78;
696
495
}
697
496
698
-
/* Olive theme - dark mode */
699
-
:root.olive {
700
-
--milestone-color-left: #5a7d30;
701
-
--milestone-color-right: #a0cc60;
702
-
}
703
-
704
-
/* Olive theme - light mode */
705
-
:root.olive.light {
706
-
--milestone-color-left: #6c9438;
707
-
--milestone-color-right: #5a7d30;
708
-
}
709
-
710
-
/* Indigo theme - dark mode */
711
-
:root.indigo {
712
-
--milestone-color-left: #3a3d80;
713
-
--milestone-color-right: #7a80e0;
714
-
}
715
-
716
-
/* Indigo theme - light mode */
717
-
:root.indigo.light {
718
-
--milestone-color-left: #484c9c;
719
-
--milestone-color-right: #3a3d80;
720
-
}
721
-
722
-
/* Coral theme - dark mode */
723
-
:root.coral {
724
-
--milestone-color-left: #c05a48;
725
-
--milestone-color-right: #ff9e80;
726
-
}
727
-
728
-
/* Coral theme - light mode */
729
-
:root.coral.light {
730
-
--milestone-color-left: #e07860;
731
-
--milestone-color-right: #c05a48;
732
-
}
733
-
734
-
/* Charcoal theme - dark mode */
735
-
:root.charcoal {
736
-
--milestone-color-left: #485058;
737
-
--milestone-color-right: #90a0b0;
738
-
}
739
-
740
-
/* Charcoal theme - light mode */
741
-
:root.charcoal.light {
742
-
--milestone-color-left: #586068;
743
-
--milestone-color-right: #384048;
497
+
/* Werewolf theme */
498
+
:root.werewolf {
499
+
--background-color: #1a1a1a;
500
+
--text-color: #f0f0f0;
501
+
--header-footer-bg: #2a2a2a;
502
+
--button-bg: #8b0000;
503
+
--button-hover-bg: #a00000;
504
+
--link-color: #ff4500;
505
+
--link-hover-color: #ff6347;
506
+
--card-bg: #2a2a2a;
507
+
--milestone-color-left: #8b0000;
508
+
--milestone-color-right: #ff4500;
744
509
}
745
-
746
-
/* Rose/Crimson theme - dark mode */
747
-
:root.rose {
748
-
--milestone-color-left: #9c2838;
749
-
--milestone-color-right: #d86070;
510
+
:root.werewolf.light {
511
+
--background-color: #f0f0f0;
512
+
--text-color: #1a1a1a;
513
+
--header-footer-bg: #e0e0e0;
514
+
--button-bg: #a00000;
515
+
--button-hover-bg: #b50000;
516
+
--link-color: #cc3300;
517
+
--link-hover-color: #e64d1a;
518
+
--card-bg: #e0e0e0;
519
+
--milestone-color-left: #a00000;
520
+
--milestone-color-right: #cc3300;
750
521
}
751
522
752
-
/* Rose/Crimson theme - light mode */
753
-
:root.rose.light {
754
-
--milestone-color-left: #b83848;
755
-
--milestone-color-right: #9c2838;
756
-
}
757
-
758
-
/* Wood theme - dark mode */
523
+
/* Wood theme */
759
524
:root.wood {
525
+
--background-color: #201a14;
526
+
--text-color: #e8dcd0;
527
+
--header-footer-bg: #342b20;
528
+
--button-bg: #6b4c33;
529
+
--button-hover-bg: #7d5a3d;
530
+
--link-color: #c49a6c;
531
+
--link-hover-color: #d8b48c;
532
+
--card-bg: #342b20;
760
533
--milestone-color-left: #6b4c33;
761
534
--milestone-color-right: #c49a6c;
762
535
}
763
-
764
-
/* Wood theme - light mode */
765
536
:root.wood.light {
537
+
--background-color: #f5efe6;
538
+
--text-color: #3c2a1c;
539
+
--header-footer-bg: #e6d7c3;
540
+
--button-bg: #8c6240;
541
+
--button-hover-bg: #a07a54;
542
+
--link-color: #6b4c33;
543
+
--link-hover-color: #4d3520;
544
+
--card-bg: #e6d7c3;
766
545
--milestone-color-left: #8c6240;
767
546
--milestone-color-right: #6b4c33;
768
547
}