the home site for me: also iteration 3 or 4 of my site
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: remove light mode

+98 -523
-1
sass/css/main.scss
··· 5 5 @use "mods"; 6 6 7 7 @use "copy-button"; 8 - @use "theme-toggle"; 9 8 @use "view-transitions";
+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
··· 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
··· 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
··· 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
··· 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
··· 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 %}