the home site for me: also iteration 3 or 4 of my site
feat: remove light mode
+98
-523
-1
sass/css/main.scss
-1
sass/css/main.scss
+2
-1
sass/css/mods.css
+2
-1
sass/css/mods.css
···
293
293
:root {
294
294
--nightshade-violet: oklch(0.27 0.0242 287.67);
295
295
--purple-night: oklch(27.58% 0.0203 289.13);
296
-
--dark-crushed-grape: oklch(74.02% 0.0756 311.96);
296
+
--red-crushed-grape: oklch(0.656 0.1189 296.74);
297
+
--dark-crushed-grape: oklch(0.6261 0.1289 284.99);
297
298
--light-crushed-grape: oklch(73.48% 0.1008 284.99);
298
299
--reseda-green: oklch(62.33% 0.0475 126.94);
299
300
--earth-yellow: oklch(86.49% 0.018 73.05);
+8
-88
sass/css/suCSS.css
+8
-88
sass/css/suCSS.css
···
14
14
--standard-border-radius: 5px;
15
15
16
16
/* default colors */
17
-
--bg: var(--earth-yellow);
18
-
--noise-strength: 0.3;
19
-
--bg-light: #cbcdcd;
20
-
--text: #41474e;
21
-
--text-light: #686764;
22
-
--text-dark: #20252b;
23
-
--accent: oklch(35.55% 0.0754 60.09);
24
-
--accent-dark: #56412bc5;
25
-
--accent-text: #dfd1bc;
26
-
--border: #646868;
27
-
--link: var(--accent);
28
-
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
29
-
}
30
-
31
-
/* theme media queries */
32
-
@media (prefers-color-scheme: dark) {
33
-
:root,
34
-
::backdrop {
35
-
color-scheme: dark;
36
-
--bg: var(--purple-night);
37
-
--noise-strength: 0.15;
38
-
--bg-light: var(--ultra-violet);
39
-
--text: var(--lavendar-breeze);
40
-
--text-light: var(--pink-puree);
41
-
--text-dark: oklch(80.28% 0.0111 204.11);
42
-
--accent: var(--rose-quartz);
43
-
--accent-dark: var(--dark-crushed-grape);
44
-
--accent-text: var(--purple-gray);
45
-
--link: var(--light-crushed-grape);
46
-
--border: var(--pink-puree);
47
-
--selection: color-mix(
48
-
in oklab,
49
-
var(--accent),
50
-
var(--purple-night) 50%
51
-
);
52
-
}
53
-
}
54
-
55
-
[data-theme="dark"] {
56
17
color-scheme: dark;
57
18
--bg: var(--purple-night);
58
19
--noise-strength: 0.15;
···
64
25
--accent-dark: var(--dark-crushed-grape);
65
26
--accent-text: var(--purple-gray);
66
27
--link: var(--light-crushed-grape);
28
+
--link-visited: var(--red-crushed-grape);
67
29
--border: var(--pink-puree);
68
30
--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
69
31
}
70
32
71
-
@media (prefers-color-scheme: light) {
72
-
:root,
73
-
::backdrop {
74
-
color-scheme: light;
75
-
--bg: var(--earth-yellow);
76
-
--noise-strength: 0.15;
77
-
--bg-light: #cbcdcd;
78
-
--text: #41474e;
79
-
--text-light: #686764;
80
-
--accent: #58310ac5;
81
-
--accent-dark: #e08f67;
82
-
--accent-text: #dfd1bc;
83
-
--border: #646868;
84
-
--link: var(--accent);
85
-
--selection: color-mix(
86
-
in oklab,
87
-
var(--accent),
88
-
var(--earth-yellow) 50%
89
-
);
90
-
}
91
-
}
92
-
93
-
[data-theme="light"] {
94
-
/* default (light) theme */
95
-
color-scheme: light;
96
-
--bg: var(--earth-yellow);
97
-
--noise-strength: 0.22;
98
-
--bg-light: var(--reseda-green);
99
-
--text: #41474e;
100
-
--text-light: #686764;
101
-
--text-dark: #20252b;
102
-
--accent: #58310ac5;
103
-
--accent-dark: #56412bc5;
104
-
--accent-text: #dfd1bc;
105
-
--border: #646868;
106
-
--link: var(--accent);
107
-
--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);
108
-
}
109
-
110
33
::selection,
111
34
::-moz-selection {
112
35
color: var(--bg);
···
187
110
h6 {
188
111
margin: 0.5em 0 0.5em 0;
189
112
padding: 0.22em 0.4em 0.22em 0.4em;
190
-
border-radius: 0.1em;
191
113
background-color: var(--accent);
192
114
border-bottom: 5px solid var(--bg-light);
193
-
border-radius: 7px 7px 10px 10px;
115
+
border-radius: 0.2em 0.2em 0.27em 0.27em;
194
116
color: var(--accent-text);
195
117
width: fit-content;
196
118
}
···
228
150
}
229
151
230
152
/* format links */
231
-
a,
232
-
a:visited {
233
-
text-decoration: none;
153
+
a {
234
154
font-weight: bold;
235
155
border-radius: 0.125rem;
236
-
color: var(--accent-dark);
156
+
color: var(--link);
157
+
text-decoration: underline double;
237
158
}
238
159
239
-
a {
240
-
color: var(--link);
160
+
a:visited {
161
+
color: var(--link-visited);
241
162
}
242
163
243
164
a:hover {
244
-
text-decoration: underline wavy;
165
+
color: var(--accent-dark);
245
166
}
246
167
247
168
/* format lists */
···
499
420
input[type="radio"] {
500
421
vertical-align: middle;
501
422
position: relative;
502
-
width: min-content;
503
423
width: 14px;
504
424
height: 14px;
505
425
}
+87
-366
sass/css/syntax-theme.css
+87
-366
sass/css/syntax-theme.css
···
2
2
* theme "Catppuccin" generated by syntect
3
3
*/
4
4
5
-
html[data-theme="light"] .z-code {
6
-
color: #4c4f69;
7
-
background-color: var(--sunset);
8
-
}
9
-
10
-
html[data-theme="light"] .z-comment {
11
-
color: #9ca0b0;
12
-
font-style: italic;
13
-
}
14
-
html[data-theme="light"] .z-string {
15
-
color: #40a02b;
16
-
}
17
-
html[data-theme="light"] .z-string.z-regexp {
18
-
color: #fe640b;
19
-
}
20
-
html[data-theme="light"] .z-constant.z-numeric {
21
-
color: #fe640b;
22
-
}
23
-
html[data-theme="light"] .z-constant.z-language.z-boolean {
24
-
color: #fe640b;
25
-
font-weight: bold;
26
-
font-style: italic;
27
-
}
28
-
html[data-theme="light"] .z-constant.z-language {
29
-
color: #7287fd;
30
-
font-style: italic;
31
-
}
32
-
html[data-theme="light"] .z-support.z-function.z-builtin {
33
-
color: #fe640b;
34
-
font-style: italic;
35
-
}
36
-
html[data-theme="light"] .z-variable.z-other.z-constant {
37
-
color: #fe640b;
38
-
}
39
-
html[data-theme="light"] .z-keyword {
40
-
color: #d20f39;
41
-
font-style: italic;
42
-
}
43
-
html[data-theme="light"] .z-keyword.z-control.z-loop,
44
-
html[data-theme="light"] .z-keyword.z-control.z-conditional,
45
-
html[data-theme="light"] .z-keyword.z-control.z-c\+\+ {
46
-
color: #8839ef;
47
-
font-weight: bold;
48
-
}
49
-
html[data-theme="light"] .z-keyword.z-control.z-return,
50
-
html[data-theme="light"] .z-keyword.z-control.z-flow.z-return {
51
-
color: #ea76cb;
52
-
font-weight: bold;
53
-
}
54
-
html[data-theme="light"] .z-support.z-type.z-exception {
55
-
color: #fe640b;
56
-
font-style: italic;
57
-
}
58
-
html[data-theme="light"] .z-keyword.z-operator,
59
-
html[data-theme="light"] .z-punctuation.z-accessor {
60
-
color: #04a5e5;
61
-
font-weight: bold;
62
-
}
63
-
html[data-theme="light"] .z-punctuation.z-separator {
64
-
color: #179299;
65
-
}
66
-
html[data-theme="light"] .z-punctuation.z-terminator {
67
-
color: #179299;
68
-
}
69
-
html[data-theme="light"] .z-punctuation.z-section {
70
-
color: #7c7f93;
71
-
}
72
-
html[data-theme="light"] .z-keyword.z-control.z-import.z-include {
73
-
color: #179299;
74
-
font-style: italic;
75
-
}
76
-
html[data-theme="light"] .z-storage {
77
-
color: #d20f39;
78
-
}
79
-
html[data-theme="light"] .z-storage.z-type {
80
-
color: #df8e1d;
81
-
font-style: italic;
82
-
}
83
-
html[data-theme="light"] .z-storage.z-modifier {
84
-
color: #d20f39;
85
-
}
86
-
html[data-theme="light"] .z-entity.z-name.z-namespace,
87
-
html[data-theme="light"] .z-meta.z-path {
88
-
color: #dc8a78;
89
-
font-style: italic;
90
-
}
91
-
html[data-theme="light"] .z-storage.z-type.z-class {
92
-
color: #dc8a78;
93
-
font-style: italic;
94
-
}
95
-
html[data-theme="light"] .z-entity.z-name.z-label {
96
-
color: #1e66f5;
97
-
}
98
-
html[data-theme="light"] .z-keyword.z-declaration.z-class {
99
-
color: #d20f39;
100
-
font-style: italic;
101
-
}
102
-
html[data-theme="light"] .z-entity.z-name.z-class,
103
-
html[data-theme="light"] .z-meta.z-toc-list.z-full-identifier {
104
-
color: #04a5e5;
105
-
}
106
-
html[data-theme="light"] .z-entity.z-other.z-inherited-class {
107
-
color: #04a5e5;
108
-
font-style: italic;
109
-
}
110
-
html[data-theme="light"] .z-entity.z-name.z-function,
111
-
html[data-theme="light"] .z-variable.z-function {
112
-
color: #1e66f5;
113
-
font-style: italic;
114
-
}
115
-
html[data-theme="light"] .z-entity.z-name.z-function.z-preprocessor {
116
-
color: #d20f39;
117
-
}
118
-
html[data-theme="light"] .z-keyword.z-control.z-import {
119
-
color: #d20f39;
120
-
}
121
-
html[data-theme="light"] .z-entity.z-name.z-function.z-constructor,
122
-
html[data-theme="light"] .z-entity.z-name.z-function.z-destructor {
123
-
color: #7287fd;
124
-
}
125
-
html[data-theme="light"] .z-variable.z-parameter.z-function {
126
-
color: #dc8a78;
127
-
font-style: italic;
128
-
}
129
-
html[data-theme="light"] .z-keyword.z-declaration.z-function {
130
-
color: #e64553;
131
-
font-style: italic;
132
-
}
133
-
html[data-theme="light"] .z-support.z-function {
134
-
color: #04a5e5;
135
-
}
136
-
html[data-theme="light"] .z-support.z-constant {
137
-
color: #1e66f5;
138
-
}
139
-
html[data-theme="light"] .z-support.z-type,
140
-
html[data-theme="light"] .z-support.z-class {
141
-
color: #1e66f5;
142
-
font-style: italic;
143
-
}
144
-
html[data-theme="light"] .z-variable.z-function {
145
-
color: #1e66f5;
146
-
font-style: italic;
147
-
}
148
-
html[data-theme="light"] .z-variable.z-parameter {
149
-
color: #dc8a78;
150
-
font-style: italic;
151
-
}
152
-
html[data-theme="light"] .z-variable.z-other {
153
-
color: #4c4f69;
154
-
font-style: italic;
155
-
}
156
-
html[data-theme="light"] .z-variable.z-other.z-member {
157
-
color: #dc8a78;
158
-
}
159
-
html[data-theme="light"] .z-variable.z-language {
160
-
color: #179299;
161
-
}
162
-
html[data-theme="light"] .z-entity.z-name.z-tag {
163
-
color: #fe640b;
164
-
}
165
-
html[data-theme="light"] .z-entity.z-other.z-attribute-name {
166
-
color: #8839ef;
167
-
font-style: italic;
168
-
}
169
-
html[data-theme="light"] .z-punctuation.z-definition.z-tag {
170
-
color: #e64553;
171
-
}
172
-
html[data-theme="light"] .z-markup.z-underline.z-link.z-markdown {
173
-
color: #dc8a78;
174
-
text-decoration: underline;
175
-
font-style: italic;
176
-
}
177
-
html[data-theme="light"] .z-meta.z-link.z-inline.z-description {
178
-
color: #7287fd;
179
-
font-weight: bold;
180
-
}
181
-
html[data-theme="light"] .z-comment.z-block.z-markdown,
182
-
html[data-theme="light"] .z-meta.z-code-fence,
183
-
html[data-theme="light"] .z-markup.z-raw.z-code-fence,
184
-
html[data-theme="light"] .z-markup.z-raw.z-inline {
185
-
color: #179299;
186
-
font-style: italic;
187
-
}
188
-
html[data-theme="light"] .z-punctuation.z-definition.z-heading,
189
-
html[data-theme="light"] .z-entity.z-name.z-section {
190
-
color: #1e66f5;
191
-
font-weight: bold;
192
-
}
193
-
html[data-theme="light"] .z-markup.z-italic {
194
-
color: #e64553;
195
-
font-style: italic;
196
-
}
197
-
html[data-theme="light"] .z-markup.z-bold {
198
-
color: #e64553;
199
-
font-weight: bold;
200
-
}
201
-
html[data-theme="light"] .z-constant.z-character.z-escape {
202
-
color: #ea76cb;
203
-
}
204
-
html[data-theme="light"]
205
-
.z-source.z-shell.z-bash
206
-
.z-meta.z-function.z-shell
207
-
.z-meta.z-compound.z-shell
208
-
.z-meta.z-function-call.z-identifier.z-shell {
209
-
color: #ea76cb;
210
-
}
211
-
html[data-theme="light"] .z-variable.z-language.z-shell {
212
-
color: #d20f39;
213
-
font-style: italic;
214
-
}
215
-
html[data-theme="light"]
216
-
.z-source.z-lua
217
-
.z-meta.z-function.z-lua
218
-
.z-meta.z-block.z-lua
219
-
.z-meta.z-mapping.z-value.z-lua
220
-
.z-meta.z-mapping.z-key.z-lua
221
-
.z-string.z-unquoted.z-key.z-lua {
222
-
color: #7287fd;
223
-
font-style: italic;
224
-
}
225
-
html[data-theme="light"]
226
-
.z-source.z-lua
227
-
.z-meta.z-function.z-lua
228
-
.z-meta.z-block.z-lua
229
-
.z-meta.z-mapping.z-key.z-lua
230
-
.z-string.z-unquoted.z-key.z-lua {
231
-
color: #dd7878;
232
-
}
233
-
html[data-theme="light"] .z-entity.z-name.z-constant.z-java {
234
-
color: #179299;
235
-
}
236
-
html[data-theme="light"] .z-support.z-type.z-property-name.z-css {
237
-
color: #dd7878;
238
-
font-style: italic;
239
-
}
240
-
html[data-theme="light"] .z-support.z-constant.z-property-value.z-css {
241
-
color: #4c4f69;
242
-
}
243
-
html[data-theme="light"] .z-constant.z-numeric.z-suffix.z-css,
244
-
html[data-theme="light"] .z-keyword.z-other.z-unit.z-css {
245
-
color: #179299;
246
-
font-style: italic;
247
-
}
248
-
html[data-theme="light"] .z-variable.z-other.z-custom-property.z-name.z-css,
249
-
html[data-theme="light"] .z-support.z-type.z-custom-property.z-name.z-css,
250
-
html[data-theme="light"] .z-punctuation.z-definition.z-custom-property.z-css {
251
-
color: #179299;
252
-
}
253
-
html[data-theme="light"] .z-entity.z-name.z-tag.z-css {
254
-
color: #7287fd;
255
-
}
256
-
html[data-theme="light"] .z-variable.z-other.z-sass {
257
-
color: #179299;
258
-
}
259
-
html[data-theme="light"] .z-invalid {
260
-
color: #4c4f69;
261
-
background-color: #d20f39;
262
-
}
263
-
html[data-theme="light"] .z-invalid.z-deprecated {
264
-
color: #4c4f69;
265
-
background-color: #8839ef;
266
-
}
267
-
html[data-theme="light"] .z-meta.z-diff,
268
-
html[data-theme="light"] .z-meta.z-diff.z-header {
269
-
color: #9ca0b0;
270
-
}
271
-
html[data-theme="light"] .z-markup.z-deleted {
272
-
color: #d20f39;
273
-
}
274
-
html[data-theme="light"] .z-markup.z-inserted {
275
-
color: #40a02b;
276
-
}
277
-
html[data-theme="light"] .z-markup.z-changed {
278
-
color: #df8e1d;
279
-
}
280
-
html[data-theme="light"] .z-message.z-error {
281
-
color: #d20f39;
282
-
}
283
-
284
5
/* dark */
285
6
286
-
html[data-theme="dark"] .z-code {
7
+
.z-code {
287
8
color: #cad3f5;
288
9
background-color: var(--nightshade-violet);
289
10
}
290
11
291
-
html[data-theme="dark"] .z-comment {
12
+
.z-comment {
292
13
color: #6e738d;
293
14
font-style: italic;
294
15
}
295
-
html[data-theme="dark"] .z-string {
16
+
.z-string {
296
17
color: #a6da95;
297
18
}
298
-
html[data-theme="dark"] .z-string.z-regexp {
19
+
.z-string.z-regexp {
299
20
color: #f5a97f;
300
21
}
301
-
html[data-theme="dark"] .z-constant.z-numeric {
22
+
.z-constant.z-numeric {
302
23
color: #f5a97f;
303
24
}
304
-
html[data-theme="dark"] .z-constant.z-language.z-boolean {
25
+
.z-constant.z-language.z-boolean {
305
26
color: #f5a97f;
306
27
font-weight: bold;
307
28
font-style: italic;
308
29
}
309
-
html[data-theme="dark"] .z-constant.z-language {
30
+
.z-constant.z-language {
310
31
color: #b7bdf8;
311
32
font-style: italic;
312
33
}
313
-
html[data-theme="dark"] .z-support.z-function.z-builtin {
34
+
.z-support.z-function.z-builtin {
314
35
color: #f5a97f;
315
36
font-style: italic;
316
37
}
317
-
html[data-theme="dark"] .z-variable.z-other.z-constant {
38
+
.z-variable.z-other.z-constant {
318
39
color: #f5a97f;
319
40
}
320
-
html[data-theme="dark"] .z-keyword {
41
+
.z-keyword {
321
42
color: #ed8796;
322
43
font-style: italic;
323
44
}
324
-
html[data-theme="dark"] .z-keyword.z-control.z-loop,
325
-
html[data-theme="dark"] .z-keyword.z-control.z-conditional,
326
-
html[data-theme="dark"] .z-keyword.z-control.z-c\+\+ {
45
+
.z-keyword.z-control.z-loop,
46
+
.z-keyword.z-control.z-conditional,
47
+
.z-keyword.z-control.z-c\+\+ {
327
48
color: #c6a0f6;
328
49
font-weight: bold;
329
50
}
330
-
html[data-theme="dark"] .z-keyword.z-control.z-return,
331
-
html[data-theme="dark"] .z-keyword.z-control.z-flow.z-return {
51
+
.z-keyword.z-control.z-return,
52
+
.z-keyword.z-control.z-flow.z-return {
332
53
color: #f5bde6;
333
54
font-weight: bold;
334
55
}
335
-
html[data-theme="dark"] .z-support.z-type.z-exception {
56
+
.z-support.z-type.z-exception {
336
57
color: #f5a97f;
337
58
font-style: italic;
338
59
}
339
-
html[data-theme="dark"] .z-keyword.z-operator,
340
-
html[data-theme="dark"] .z-punctuation.z-accessor {
60
+
.z-keyword.z-operator,
61
+
.z-punctuation.z-accessor {
341
62
color: #91d7e3;
342
63
font-weight: bold;
343
64
}
344
-
html[data-theme="dark"] .z-punctuation.z-separator {
65
+
.z-punctuation.z-separator {
345
66
color: #8bd5ca;
346
67
}
347
-
html[data-theme="dark"] .z-punctuation.z-terminator {
68
+
.z-punctuation.z-terminator {
348
69
color: #8bd5ca;
349
70
}
350
-
html[data-theme="dark"] .z-punctuation.z-section {
71
+
.z-punctuation.z-section {
351
72
color: #939ab7;
352
73
}
353
-
html[data-theme="dark"] .z-keyword.z-control.z-import.z-include {
74
+
.z-keyword.z-control.z-import.z-include {
354
75
color: #8bd5ca;
355
76
font-style: italic;
356
77
}
357
-
html[data-theme="dark"] .z-storage {
78
+
.z-storage {
358
79
color: #ed8796;
359
80
}
360
-
html[data-theme="dark"] .z-storage.z-type {
81
+
.z-storage.z-type {
361
82
color: #eed49f;
362
83
font-style: italic;
363
84
}
364
-
html[data-theme="dark"] .z-storage.z-modifier {
85
+
.z-storage.z-modifier {
365
86
color: #ed8796;
366
87
}
367
-
html[data-theme="dark"] .z-entity.z-name.z-namespace,
368
-
html[data-theme="dark"] .z-meta.z-path {
88
+
.z-entity.z-name.z-namespace,
89
+
.z-meta.z-path {
369
90
color: #f4dbd6;
370
91
font-style: italic;
371
92
}
372
-
html[data-theme="dark"] .z-storage.z-type.z-class {
93
+
.z-storage.z-type.z-class {
373
94
color: #f4dbd6;
374
95
font-style: italic;
375
96
}
376
-
html[data-theme="dark"] .z-entity.z-name.z-label {
97
+
.z-entity.z-name.z-label {
377
98
color: #8aadf4;
378
99
}
379
-
html[data-theme="dark"] .z-keyword.z-declaration.z-class {
100
+
.z-keyword.z-declaration.z-class {
380
101
color: #ed8796;
381
102
font-style: italic;
382
103
}
383
-
html[data-theme="dark"] .z-entity.z-name.z-class,
384
-
html[data-theme="dark"] .z-meta.z-toc-list.z-full-identifier {
104
+
.z-entity.z-name.z-class,
105
+
.z-meta.z-toc-list.z-full-identifier {
385
106
color: #91d7e3;
386
107
}
387
-
html[data-theme="dark"] .z-entity.z-other.z-inherited-class {
108
+
.z-entity.z-other.z-inherited-class {
388
109
color: #91d7e3;
389
110
font-style: italic;
390
111
}
391
-
html[data-theme="dark"] .z-entity.z-name.z-function,
392
-
html[data-theme="dark"] .z-variable.z-function {
112
+
.z-entity.z-name.z-function,
113
+
.z-variable.z-function {
393
114
color: #8aadf4;
394
115
font-style: italic;
395
116
}
396
-
html[data-theme="dark"] .z-entity.z-name.z-function.z-preprocessor {
117
+
.z-entity.z-name.z-function.z-preprocessor {
397
118
color: #ed8796;
398
119
}
399
-
html[data-theme="dark"] .z-keyword.z-control.z-import {
120
+
.z-keyword.z-control.z-import {
400
121
color: #ed8796;
401
122
}
402
-
html[data-theme="dark"] .z-entity.z-name.z-function.z-constructor,
403
-
html[data-theme="dark"] .z-entity.z-name.z-function.z-destructor {
123
+
.z-entity.z-name.z-function.z-constructor,
124
+
.z-entity.z-name.z-function.z-destructor {
404
125
color: #b7bdf8;
405
126
}
406
-
html[data-theme="dark"] .z-variable.z-parameter.z-function {
127
+
.z-variable.z-parameter.z-function {
407
128
color: #f4dbd6;
408
129
font-style: italic;
409
130
}
410
-
html[data-theme="dark"] .z-keyword.z-declaration.z-function {
131
+
.z-keyword.z-declaration.z-function {
411
132
color: #ee99a0;
412
133
font-style: italic;
413
134
}
414
-
html[data-theme="dark"] .z-support.z-function {
135
+
.z-support.z-function {
415
136
color: #91d7e3;
416
137
}
417
-
html[data-theme="dark"] .z-support.z-constant {
138
+
.z-support.z-constant {
418
139
color: #8aadf4;
419
140
}
420
-
html[data-theme="dark"] .z-support.z-type,
421
-
html[data-theme="dark"] .z-support.z-class {
141
+
.z-support.z-type,
142
+
.z-support.z-class {
422
143
color: #8aadf4;
423
144
font-style: italic;
424
145
}
425
-
html[data-theme="dark"] .z-variable.z-function {
146
+
.z-variable.z-function {
426
147
color: #8aadf4;
427
148
font-style: italic;
428
149
}
429
-
html[data-theme="dark"] .z-variable.z-parameter {
150
+
.z-variable.z-parameter {
430
151
color: #f4dbd6;
431
152
font-style: italic;
432
153
}
433
-
html[data-theme="dark"] .z-variable.z-other {
154
+
.z-variable.z-other {
434
155
color: #cad3f5;
435
156
font-style: italic;
436
157
}
437
-
html[data-theme="dark"] .z-variable.z-other.z-member {
158
+
.z-variable.z-other.z-member {
438
159
color: #f4dbd6;
439
160
}
440
-
html[data-theme="dark"] .z-variable.z-language {
161
+
.z-variable.z-language {
441
162
color: #8bd5ca;
442
163
}
443
-
html[data-theme="dark"] .z-entity.z-name.z-tag {
164
+
.z-entity.z-name.z-tag {
444
165
color: #f5a97f;
445
166
}
446
-
html[data-theme="dark"] .z-entity.z-other.z-attribute-name {
167
+
.z-entity.z-other.z-attribute-name {
447
168
color: #c6a0f6;
448
169
font-style: italic;
449
170
}
450
-
html[data-theme="dark"] .z-punctuation.z-definition.z-tag {
171
+
.z-punctuation.z-definition.z-tag {
451
172
color: #ee99a0;
452
173
}
453
-
html[data-theme="dark"] .z-markup.z-underline.z-link.z-markdown {
174
+
.z-markup.z-underline.z-link.z-markdown {
454
175
color: #f4dbd6;
455
176
text-decoration: underline;
456
177
font-style: italic;
457
178
}
458
-
html[data-theme="dark"] .z-meta.z-link.z-inline.z-description {
179
+
.z-meta.z-link.z-inline.z-description {
459
180
color: #b7bdf8;
460
181
font-weight: bold;
461
182
}
462
-
html[data-theme="dark"] .z-comment.z-block.z-markdown,
463
-
html[data-theme="dark"] .z-meta.z-code-fence,
464
-
html[data-theme="dark"] .z-markup.z-raw.z-code-fence,
465
-
html[data-theme="dark"] .z-markup.z-raw.z-inline {
183
+
.z-comment.z-block.z-markdown,
184
+
.z-meta.z-code-fence,
185
+
.z-markup.z-raw.z-code-fence,
186
+
.z-markup.z-raw.z-inline {
466
187
color: #8bd5ca;
467
188
font-style: italic;
468
189
}
469
-
html[data-theme="dark"] .z-punctuation.z-definition.z-heading,
470
-
html[data-theme="dark"] .z-entity.z-name.z-section {
190
+
.z-punctuation.z-definition.z-heading,
191
+
.z-entity.z-name.z-section {
471
192
color: #8aadf4;
472
193
font-weight: bold;
473
194
}
474
-
html[data-theme="dark"] .z-markup.z-italic {
195
+
.z-markup.z-italic {
475
196
color: #ee99a0;
476
197
font-style: italic;
477
198
}
478
-
html[data-theme="dark"] .z-markup.z-bold {
199
+
.z-markup.z-bold {
479
200
color: #ee99a0;
480
201
font-weight: bold;
481
202
}
482
-
html[data-theme="dark"] .z-constant.z-character.z-escape {
203
+
.z-constant.z-character.z-escape {
483
204
color: #f5bde6;
484
205
}
485
206
html[data-theme="dark"]
···
489
210
.z-meta.z-function-call.z-identifier.z-shell {
490
211
color: #f5bde6;
491
212
}
492
-
html[data-theme="dark"] .z-variable.z-language.z-shell {
213
+
.z-variable.z-language.z-shell {
493
214
color: #ed8796;
494
215
font-style: italic;
495
216
}
496
-
html[data-theme="dark"]
497
-
.z-source.z-lua
217
+
218
+
.z-source.z-lua
498
219
.z-meta.z-function.z-lua
499
220
.z-meta.z-block.z-lua
500
221
.z-meta.z-mapping.z-value.z-lua
···
503
224
color: #b7bdf8;
504
225
font-style: italic;
505
226
}
506
-
html[data-theme="dark"]
507
-
.z-source.z-lua
227
+
228
+
.z-source.z-lua
508
229
.z-meta.z-function.z-lua
509
230
.z-meta.z-block.z-lua
510
231
.z-meta.z-mapping.z-key.z-lua
511
232
.z-string.z-unquoted.z-key.z-lua {
512
233
color: #f0c6c6;
513
234
}
514
-
html[data-theme="dark"] .z-entity.z-name.z-constant.z-java {
235
+
.z-entity.z-name.z-constant.z-java {
515
236
color: #8bd5ca;
516
237
}
517
-
html[data-theme="dark"] .z-support.z-type.z-property-name.z-css {
238
+
.z-support.z-type.z-property-name.z-css {
518
239
color: #f0c6c6;
519
240
font-style: italic;
520
241
}
521
-
html[data-theme="dark"] .z-support.z-constant.z-property-value.z-css {
242
+
.z-support.z-constant.z-property-value.z-css {
522
243
color: #cad3f5;
523
244
}
524
-
html[data-theme="dark"] .z-constant.z-numeric.z-suffix.z-css,
525
-
html[data-theme="dark"] .z-keyword.z-other.z-unit.z-css {
245
+
.z-constant.z-numeric.z-suffix.z-css,
246
+
.z-keyword.z-other.z-unit.z-css {
526
247
color: #8bd5ca;
527
248
font-style: italic;
528
249
}
529
-
html[data-theme="dark"] .z-variable.z-other.z-custom-property.z-name.z-css,
530
-
html[data-theme="dark"] .z-support.z-type.z-custom-property.z-name.z-css,
531
-
html[data-theme="dark"] .z-punctuation.z-definition.z-custom-property.z-css {
250
+
.z-variable.z-other.z-custom-property.z-name.z-css,
251
+
.z-support.z-type.z-custom-property.z-name.z-css,
252
+
.z-punctuation.z-definition.z-custom-property.z-css {
532
253
color: #8bd5ca;
533
254
}
534
-
html[data-theme="dark"] .z-entity.z-name.z-tag.z-css {
255
+
.z-entity.z-name.z-tag.z-css {
535
256
color: #b7bdf8;
536
257
}
537
-
html[data-theme="dark"] .z-variable.z-other.z-sass {
258
+
.z-variable.z-other.z-sass {
538
259
color: #8bd5ca;
539
260
}
540
-
html[data-theme="dark"] .z-invalid {
261
+
.z-invalid {
541
262
color: #cad3f5;
542
263
background-color: #ed8796;
543
264
}
544
-
html[data-theme="dark"] .z-invalid.z-deprecated {
265
+
.z-invalid.z-deprecated {
545
266
color: #cad3f5;
546
267
background-color: #c6a0f6;
547
268
}
548
-
html[data-theme="dark"] .z-meta.z-diff,
549
-
html[data-theme="dark"] .z-meta.z-diff.z-header {
269
+
.z-meta.z-diff,
270
+
.z-meta.z-diff.z-header {
550
271
color: #6e738d;
551
272
}
552
-
html[data-theme="dark"] .z-markup.z-deleted {
273
+
.z-markup.z-deleted {
553
274
color: #ed8796;
554
275
}
555
-
html[data-theme="dark"] .z-markup.z-inserted {
276
+
.z-markup.z-inserted {
556
277
color: #a6da95;
557
278
}
558
-
html[data-theme="dark"] .z-markup.z-changed {
279
+
.z-markup.z-changed {
559
280
color: #eed49f;
560
281
}
561
-
html[data-theme="dark"] .z-message.z-error {
282
+
.z-message.z-error {
562
283
color: #ed8796;
563
284
}
-49
static/js/theme-toggle.js
-49
static/js/theme-toggle.js
···
1
-
const toggleButton = document.getElementById("theme-toggle");
2
-
const themeIcon = document
3
-
.getElementById("theme-toggle-label")
4
-
.querySelector("i");
5
-
const themeSound = document.getElementById("theme-sound");
6
-
7
-
// Function to update the theme icon based on the current theme
8
-
const updateThemeIcon = (isDarkMode) => {
9
-
themeIcon.style.setProperty(
10
-
"--icon-toggle",
11
-
isDarkMode ? "var(--icon-dark)" : "var(--icon-light)",
12
-
);
13
-
};
14
-
15
-
// Function to update the theme based on the current mode
16
-
const updateTheme = (isDarkMode) => {
17
-
const theme = isDarkMode ? "dark" : "light";
18
-
document.documentElement.setAttribute("data-theme", theme);
19
-
updateThemeIcon(isDarkMode);
20
-
};
21
-
22
-
// Function to toggle the theme
23
-
const toggleTheme = () => {
24
-
const isDarkMode = toggleButton.checked;
25
-
updateTheme(isDarkMode);
26
-
themeSound.currentTime = 0;
27
-
themeSound.play();
28
-
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
29
-
};
30
-
31
-
// Event listener for theme toggle
32
-
toggleButton.addEventListener("change", toggleTheme);
33
-
34
-
// Function to initialize the theme based on the stored preference
35
-
const initializeTheme = () => {
36
-
const storedTheme = localStorage.getItem("theme");
37
-
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
38
-
const isDarkMode = storedTheme === "dark" || (!storedTheme && prefersDark);
39
-
toggleButton.checked = isDarkMode;
40
-
updateTheme(isDarkMode);
41
-
};
42
-
43
-
// Initialize the theme
44
-
initializeTheme();
45
-
46
-
// Listen for changes in system preference
47
-
window
48
-
.matchMedia("(prefers-color-scheme: dark)")
49
-
.addEventListener("change", initializeTheme);
+1
-6
templates/head.html
+1
-6
templates/head.html
···
77
77
type="text/css"
78
78
href="{{ get_url(path='css/main.css?' ~ cssHash, trailing_slash=false) | safe }}"
79
79
/>
80
-
{% endblock css %} {% set jsHash = get_hash(path="js/theme-toggle.js", sha_type=256,
81
-
base64=true) %}
82
-
<script
83
-
src="{{ get_url(path='js/theme-toggle.js?' ~ jsHash, trailing_slash=false) | safe }}"
84
-
defer
85
-
></script>
80
+
{% endblock css %}
86
81
87
82
{% set jsHash = get_hash(path="js/copy-button.js", sha_type=256,
88
83
base64=true) %}
-12
templates/header.html
-12
templates/header.html
···
9
9
{{ nav_item.name }}
10
10
</a>
11
11
{% endfor %}
12
-
<div>
13
-
<input type="checkbox" id="theme-toggle" style="display: none" />
14
-
<label for="theme-toggle" id="theme-toggle-label"
15
-
><i class="icon"></i
16
-
></label>
17
-
<audio id="theme-sound">
18
-
<source
19
-
src="{{ get_url(path='click.ogg', trailing_slash=false) | safe }}"
20
-
type="audio/ogg"
21
-
/>
22
-
</audio>
23
-
</div>
24
12
</nav>
25
13
{% endif %}