Commit

Author:

Hash:

Timestamp:

+341 -526 +/-9 browse

Kevin Schoon [me@kevinschoon.com]

1ac16686a6470fdaadfd791cbd7d75b7f9ce02e4

Tue, 07 Oct 2025 11:03:27 +0000 (1 month ago)

make themeing more sane via css variables
1diff --git a/Cargo.lock b/Cargo.lock
2index b3a3ca9..b61f91c 100644
3--- a/Cargo.lock
4+++ b/Cargo.lock
5 @@ -302,6 +302,7 @@ dependencies = [
6 "ayllu_identity",
7 "bytes",
8 "comrak",
9+ "const-css-minify",
10 "file-mode",
11 "futures",
12 "git2",
13 @@ -697,6 +698,12 @@ dependencies = [
14 ]
15
16 [[package]]
17+ name = "const-css-minify"
18+ version = "1.0.0"
19+ source = "registry+https://github.com/rust-lang/crates.io-index"
20+ checksum = "cb16320721f6441f979feff82c8b4fe789a5423f48e4e724d124211c44be43af"
21+
22+ [[package]]
23 name = "const-oid"
24 version = "0.9.6"
25 source = "registry+https://github.com/rust-lang/crates.io-index"
26 diff --git a/ayllu/Cargo.toml b/ayllu/Cargo.toml
27index a222cfd..ae5e2c7 100644
28--- a/ayllu/Cargo.toml
29+++ b/ayllu/Cargo.toml
30 @@ -3,6 +3,7 @@ name = "ayllu"
31 version = "0.5.1"
32 edition = "2024"
33
34+
35 [[bin]]
36 name = "ayllu"
37
38 @@ -54,6 +55,7 @@ askama = { version = "0.14.0" }
39 openssh-keys = "0.6.4"
40 nix = { version = "0.30.1", default-features = false, features = ["user"] }
41 layout-rs = "0.1.3"
42+ const-css-minify = "1.0.0"
43
44 [dev-dependencies]
45 tempfile = {workspace = true}
46 diff --git a/ayllu/src/config.rs b/ayllu/src/config.rs
47index c57f4dd..92a8478 100644
48--- a/ayllu/src/config.rs
49+++ b/ayllu/src/config.rs
50 @@ -1,3 +1,4 @@
51+ use const_css_minify::minify;
52 use std::fs::metadata;
53 use std::{collections::HashMap, path::PathBuf};
54 use url::Url;
55 @@ -115,15 +116,15 @@ impl Web {
56 vec![
57 Theme {
58 name: String::from("default"),
59- css_content: include_str!("../themes/default.css").to_string(),
60+ css_content: minify!("../themes/default.css").to_string(),
61 },
62 Theme {
63 name: String::from("nord"),
64- css_content: include_str!("../themes/nord.css").to_string(),
65+ css_content: minify!("../themes/nord.css").to_string(),
66 },
67 Theme {
68 name: String::from("catppuccin"),
69- css_content: include_str!("../themes/catppuccin.css").to_string(),
70+ css_content: minify!("../themes/catppuccin.css").to_string(),
71 },
72 ]
73 }
74 diff --git a/ayllu/src/web2/routes/assets.rs b/ayllu/src/web2/routes/assets.rs
75index 1f09881..25f48f2 100644
76--- a/ayllu/src/web2/routes/assets.rs
77+++ b/ayllu/src/web2/routes/assets.rs
78 @@ -1,32 +1,53 @@
79 use crate::web2::extractors::config::ConfigReader;
80+ use crate::web2::template::DEFAULT_THEME_COLORIZER_CSS;
81 use crate::{config::Config, web2::template::DEFAULT_THEME_CSS};
82 use axum::{extract, http::header::CONTENT_TYPE, response::Response};
83
84+ struct CSSBuilder<'a> {
85+ base_css: &'a str,
86+ colorizer: &'a str,
87+ theme: &'a str,
88+ }
89+
90+ impl CSSBuilder<'_> {
91+ pub fn generate(&self) -> String {
92+ format!("{}\n\n{}\n\n{}", self.base_css, self.theme, self.colorizer,)
93+ }
94+ }
95+
96 pub async fn serve_stylesheet(
97 extract::State(state): extract::State<Config>,
98 ConfigReader(user_config): ConfigReader,
99 ) -> Response<String> {
100 let theme_css = if let Some(current_theme) = user_config.theme {
101- let theme_content = state
102+ state
103 .web
104 .themes
105 .iter()
106 .find(|theme| theme.name == current_theme)
107- .map(|theme| format!("{}\n\n{}", DEFAULT_THEME_CSS, theme.css_content))
108+ .map(|theme| {
109+ CSSBuilder {
110+ base_css: DEFAULT_THEME_CSS,
111+ colorizer: DEFAULT_THEME_COLORIZER_CSS,
112+ theme: &theme.css_content,
113+ }
114+ .generate()
115+ })
116 .unwrap_or_else(|| {
117- format!(
118- "{}\n\n{}",
119- DEFAULT_THEME_CSS,
120- state.web.read_default_theme().css_content
121- )
122- });
123- theme_content
124+ CSSBuilder {
125+ base_css: DEFAULT_THEME_CSS,
126+ colorizer: DEFAULT_THEME_COLORIZER_CSS,
127+ theme: &state.web.read_default_theme().css_content,
128+ }
129+ .generate()
130+ })
131 } else {
132- format!(
133- "{}\n\n{}",
134- DEFAULT_THEME_CSS,
135- state.web.read_default_theme().css_content
136- )
137+ CSSBuilder {
138+ base_css: DEFAULT_THEME_CSS,
139+ colorizer: DEFAULT_THEME_COLORIZER_CSS,
140+ theme: &state.web.read_default_theme().css_content,
141+ }
142+ .generate()
143 };
144 let mut res = Response::new(theme_css);
145 let headers = res.headers_mut();
146 diff --git a/ayllu/src/web2/template.rs b/ayllu/src/web2/template.rs
147index 44f63d3..c11724d 100644
148--- a/ayllu/src/web2/template.rs
149+++ b/ayllu/src/web2/template.rs
150 @@ -1,3 +1,4 @@
151+ use const_css_minify::minify;
152 use serde::{Deserialize, Serialize};
153
154 pub type Items = Vec<(String, String, bool)>;
155 @@ -6,7 +7,8 @@ pub type Items = Vec<(String, String, bool)>;
156 pub const DEFAULT_LOGO: &str = include_str!("../../assets/logo.svg");
157 pub const DEFAULT_RSS_ICON: &str = include_str!("../../assets/feed.svg");
158 pub const DEFAULT_ANCHOR_SYMBOL: &str = include_str!("../../assets/anchor.svg");
159- pub const DEFAULT_THEME_CSS: &str = include_str!("../../themes/base.css");
160+ pub const DEFAULT_THEME_CSS: &str = minify!("../../themes/base.css");
161+ pub const DEFAULT_THEME_COLORIZER_CSS: &str = minify!("../../themes/colorize.css");
162 pub const DEFAULT_RSS_XSLT_FILE: &str = include_str!("../../assets/feed.xsl");
163
164 // base.render_time = Some(
165 diff --git a/ayllu/templates/base.html b/ayllu/templates/base.html
166index 2257fb0..f00c0ab 100644
167--- a/ayllu/templates/base.html
168+++ b/ayllu/templates/base.html
169 @@ -25,7 +25,7 @@
170 </main>
171 <footer>
172 <section id="render-info">
173- Rendered {%- if let Some(render_time) = base.render_time %}in {{ render_time }} (ms){%- endif %} @ {{ base.current_time }}
174+ Rendered {%- if let Some(render_time) = base.render_time %} in {{ render_time }} (ms){%- endif %} @ {{ base.current_time }}
175 </section>
176 <section id="build-info">
177 <pre>Commit = {{ base.version_info }}, Rust = {{ base.rust_version }}</pre>
178 diff --git a/ayllu/themes/catppuccin.css b/ayllu/themes/catppuccin.css
179index e6f3905..6ea4bf7 100644
180--- a/ayllu/themes/catppuccin.css
181+++ b/ayllu/themes/catppuccin.css
182 @@ -27,9 +27,7 @@
183 --ctp-latte-base: #eff1f5;
184 --ctp-latte-mantle: #e6e9ef;
185 --ctp-latte-crust: #dce0e8;
186- }
187
188- :root {
189 --ctp-mocha-rosewater: #f5e0dc;
190 --ctp-mocha-flamingo: #f2cdcd;
191 --ctp-mocha-pink: #f5c2e7;
192 @@ -56,253 +54,70 @@
193 --ctp-mocha-base: #1e1e2e;
194 --ctp-mocha-mantle: #181825;
195 --ctp-mocha-crust: #11111b;
196- }
197-
198- a {
199- color: var(--ctp-latte-blue);
200- }
201-
202- .selected {
203- background-color: var(--ctp-latte-lavender);
204- }
205-
206- section.dag {
207- background-color: var(--ctp-latte-base);
208- }
209-
210- body {
211- color: var(--ctp-latte-text);
212- background-color: var(--ctp-latte-base);
213- }
214-
215- nav {
216- a {
217- color: var(--ctp-latte-sky);
218- font-weight: bold;
219- font-size: large;
220- }
221-
222- color: var(--ctp-latte-text);
223- background-color: var(--ctp-latte-mantle);
224- }
225-
226- nav .subnav {
227- background-color: var(--ctp-latte-mantle);
228- }
229-
230- table.data-table thead {
231- color: var(--ctp-latte-surface0);
232- background-color: var(--ctp-latte-lavender);
233- }
234-
235- table.data-table tbody tr:nth-child(odd) {
236- background-color: var(--ctp-latte-surface0);
237- }
238-
239- table.data-table tbody tr:nth-child(even) {
240- background-color: var(--ctp-latte-surface1);
241- }
242-
243- section.selectable-text>span.selectable {
244- color: var(--ctp-latte-text);
245- border-color: var(--ctp-latte-lavender);
246- background-color: var(--ctp-latte-mantle);
247- }
248-
249- section.selectable-text>span.protocol-badge {
250- color: var(--ctp-latte-mantle);
251- border-color: var(--ctp-latte-lavender);
252- background-color: var(--ctp-latte-text);
253- }
254-
255- section#readme-header {
256- color: var(--ctp-latte-base);
257- background-color: var(--ctp-latte-lavender);
258- }
259-
260- .positive {
261- color: var(--ctp-latte-green);
262- text-shadow: 1px 1px 5px var(--ctp-latte-green);
263- }
264-
265- .negative {
266- color: var(--ctp-latte-maroon);
267- text-shadow: 1px 1px 5px var(--ctp-latte-maroon);
268- }
269-
270- section.info-bar {
271- background-color: var(--ctp-latte-surface0);
272- color: var(--ctp-latte-text);
273- border-color: var(--ctp-latte-lavender);
274- }
275-
276- section.info-bar.single {
277- border-color: var(--ctp-latte-lavender);
278- }
279-
280- section.lower-half {
281- border-color: var(--ctp-latte-lavender);
282- }
283-
284- section#commit-summary {
285- background: var(--ctp-latte-surface0);
286- }
287-
288- section#commit-summary>section>pre {
289- background-color: var(--ctp-latte-mantle);
290- }
291-
292- /* Syntax Highlighting */
293-
294- section#code-viewer {
295- color: var(--ctp-latte-text);
296- background-color: var(--ctp-latte-base);
297- }
298-
299- /*
300- span.ts_operator {}
301- span.ts_property {}
302- span.ts_punctuation {}
303- span.ts_punctuation_bracket {}
304- span.ts_punctuation_delimiter {}
305- span.ts_variable_builtin {}
306- span.ts_variable_parameter {}
307- */
308-
309- span.ts_attribute {
310- color: var(--ctp-latte-flamingo);
311- }
312-
313- span.ts_comment {
314- color: var(--ctp-latte-subtext0);
315- }
316-
317- span.ts_constant {
318- color: var(--ctp-latte-rosewater);
319- }
320-
321- span.ts_function_builtin {
322- color: var(--ctp-latte-flamingo);
323- }
324-
325- span.ts_function {
326- color: var(--ctp-latte-lavender);
327- }
328-
329- span.ts_keyword {
330- color: var(--ctp-latte-rosewater);
331- }
332-
333- span.ts_string {
334- color: var(--ctp-latte-subtext1);
335- }
336-
337- span.ts_string_special {
338- color: var(--ctp-latte-teal);
339- }
340-
341- span.ts_tag {
342- color: var(--ctp-latte-peach);
343- }
344-
345- span.ts_type {
346- color: var(--ctp-latte-pink);
347- }
348-
349- span.ts_type_builtin {
350- color: var(--ctp-latte-mauve);
351- }
352
353- span.ts_variable {
354- color: var(--ctp-latte-rosewater);
355- }
356-
357- span.ts_removal {
358- color: var(--ctp-latte-red);
359- }
360-
361- span.ts_addition {
362- color: var(--ctp-latte-green);
363- }
364-
365- /* Dark Mode */
366-
367- @media (prefers-color-scheme: dark) {
368- a {
369- color: var(--ctp-mocha-lavender);
370- }
371-
372- nav {
373- a {
374- font-weight: bold;
375- font-size: large;
376- }
377-
378- color: var(--ctp-mocha-lavender);
379- background-color: var(--ctp-mocha-surface0);
380- }
381-
382-
383-
384- section.dag {
385- background-color: var(--ctp-mocha-overlay0);
386- }
387-
388- nav .subnav {
389- background-color: var(--ctp-mocha-surface1);
390- }
391-
392- body {
393- color: var(--ctp-mocha-text);
394- background-color: var(--ctp-mocha-base);
395- }
396-
397- section.selectable-text>.selectable {
398- color: var(--ctp-mocha-base);
399- background-color: var(--ctp-mocha-lavender);
400- }
401-
402- .data-table {
403- color: var(--ctp-mocha-text);
404-
405- a {
406- color: var(--ctp-mocha-blue);
407- }
408- }
409-
410- table.data-table thead {
411- color: var(--ctp-mocha-surface0);
412- background-color: var(--ctp-mocha-lavender);
413- }
414-
415- table.data-table tbody tr:nth-child(odd) {
416- background-color: var(--ctp-mocha-surface1);
417- }
418-
419- table.data-table tbody tr:nth-child(even) {
420- background-color: var(--ctp-mocha-surface2);
421- }
422-
423- section#code-viewer {
424- color: var(--ctp-mocha-text);
425- background-color: var(--ctp-mocha-crust);
426- }
427-
428- section.info-bar {
429- background-color: var(--ctp-mocha-surface1);
430- color: var(--ctp-mocha-text);
431- border-color: var(--ctp-mocha-mauve);
432- }
433-
434- section.lower-half {
435- border-color: var(--ctp-mocha-mauve);
436- }
437-
438- section#commit-summary {
439- background-color: var(--ctp-mocha-surface1);
440- }
441+ --ayllu-color: var(--ctp-latte-text);
442+ --ayllu-background: var(--ctp-latte-base);
443+ --ayllu-background-secondary: var(--ctp-latte-mantle);
444+ --ayllu-background-tertiary: var(--ctp-latte-crust);
445+ --ayllu-link: var(--ctp-latte-sky);
446+ --ayllu-nav: var(--ctp-latte-text);
447+ --ayllu-nav-link: var(--ctp-latte-blue);
448+ --ayllu-nav-background: var(--ctp-latte-overlay0);
449+ --ayllu-subnav-background: var(--ctp-latte-overlay1);
450+ --ayllu-table-header: var(--ctp-latte-surface0);
451+ --ayllu-table-header-background: var(--ctp-latte-lavender);
452+ --ayllu-table-row-primary: var(--ctp-latte-mantle);
453+ --ayllu-table-row-secondary: var(--ctp-latte-crust);
454+ --ayllu-selected: var(--nord7);
455+ --ayllu-positive: var(--ctp-latte-green);
456+ --ayllu-negative: var(--ctp-latte-red);
457+ --ayllu-section: var(--ctp-latte-overlay2);
458+ --ayllu-section-title: var(--ctp-latte-text);
459+ --ayllu-section-background: var(--ctp-latte-mantle);
460+ --ayllu-section-border: var(--ctp-latte-text);
461+ --ayllu-section-link: var(--ctp-latte-mauve);
462+ --ayllu-section-header-link: var(--ctp-latte-blue);
463+
464+ --ayllu-selectable-text: var(--ctp-latte-subtext1);
465+ --ayllu-selectable-text-background: var(--ctp-latte-surface0);
466+ --ayllu-selectable-text-background-badge: var(--ctp-latte-lavender);
467+
468+ --ayllu-code-viewer: var(--ctp-latte-text);
469+ --ayllu-code-viewer-background: white;
470+
471+ --ts-attribute: var(--ctp-latte-flamingo);
472+ --ts-comment: var(--ctp-latte-subtext0);
473+ --ts-constant: var(--ctp-latte-rosewater);
474+ --ts-function-builtin: var(--ctp-latte-flamingo);
475+ --ts-function: var(--ctp-latte-lavender);
476+ --ts-keyword: var(--ctp-latte-rosewater);
477+ --ts-string: var(--ctp-latte-subtext1);
478+ --ts-string-special: var(--ctp-latte-teal);
479+ --ts-tag: var(--ctp-latte-peach);
480+ --ts-type-builtin: var(--ctp-latte-pink);
481+ --ts-variable: var(--ctp-latte-rosewater);
482+ --ts-removal: var(--ctp-latte-red);
483+ --ts-addition: var(--ctp-latte-green);
484+
485+
486+ /* Dark Mode */
487+
488+ @media (prefers-color-scheme: dark) {
489+ --ayllu-color: var(--ctp-mocha-text);
490+ --ayllu-background: var(--ctp-mocha-base);
491+ --ayllu-link: var(--ctp-mocha-sapphire);
492+ --ayllu-section: var(--ctp-mocha-text);
493+ --ayllu-section-border: var(--ctp-mocha-maroon);
494+ --ayllu-section-title: var(--ctp-mocha-text);
495+ --ayllu-section-background: var(--ctp-mocha-surface0);
496+ --ayllu-background-secondary: var(--ctp-mocha-surface1);
497+ --ayllu-background-tertiary: var(--ctp-mocha-surface2);
498+
499+ --ayllu-code-viewer: var(--nord5);
500+ --ayllu-code-viewer-background: var(--nord1);
501+
502+ --ayllu-table-row-primary: var(--ctp-mocha-surface1);
503+ --ayllu-table-row-secondary: var(--ctp-mocha-surface2);
504
505- section#commit-summary>section>pre {
506- background-color: var(--ctp-mocha-mantle);
507 }
508 }
509\ No newline at end of file
510 diff --git a/ayllu/themes/colorize.css b/ayllu/themes/colorize.css
511new file mode 100644
512index 0000000..6587dbe
513--- /dev/null
514+++ b/ayllu/themes/colorize.css
515 @@ -0,0 +1,166 @@
516+ /* theme stylesheets are expected to set these but if they do not these serve as defaults */
517+
518+ a {
519+ color: var(--ayllu-link);
520+ }
521+
522+ body {
523+ color: var(--ayllu-color);
524+ background-color: var(--ayllu-background);
525+ }
526+
527+ nav {
528+ color: var(--ayllu-nav);
529+ background-color: var(--ayllu-nav-background);
530+
531+ a {
532+ color: var(--ayllu-nav-link);
533+ }
534+ }
535+
536+ section.title>a {
537+ color: var(--ayllu-section-header-link);
538+ }
539+
540+ nav.subnav {
541+ color: var(--ayllu-nav);
542+ background-color: var(--ayllu-subnav-background);
543+ }
544+
545+ table.data-table tbody tr:nth-child(odd) {
546+ background-color: var(--ayllu-table-row-primary);
547+ }
548+
549+ table.data-table tbody tr:nth-child(even) {
550+ background-color: var(--ayllu-table-row-secondary);
551+ }
552+
553+ table.data-table thead {
554+ color: var(--ayllu-table-header);
555+ background-color: var(--ayllu-table-header-background);
556+ }
557+
558+ section.title {
559+ color: var(--ayllu-section-title);
560+ }
561+
562+ section.selectable-text {
563+ color: var(--ayllu-selectable-text);
564+ }
565+
566+ section.selectable-text>.protocol-badge {
567+ background-color: var(--ayllu-selectable-text-background-badge);
568+ }
569+
570+ section.selectable-text>span.selectable {
571+ background-color: var(--ayllu-selectable-text-background);
572+ }
573+
574+ section.info-bar {
575+ background-color: var(--ayllu-section-background);
576+ color: var(--ayllu-section);
577+ border-color: var(--ayllu-section-border);
578+ }
579+
580+ section.lower-half {
581+ background-color: var(--ayllu-section-background);
582+ color: var(--ayllu-section);
583+ border-color: var(--ayllu-section-border);
584+ }
585+
586+ section#readme {
587+ background-color: var(--ayllu-background-secondary);
588+ }
589+
590+ section#commit-summary {
591+ background-color: var(--ayllu-background-secondary);
592+ }
593+
594+ section#commit-summary>section>pre {
595+ background-color: var(--ayllu-background-tertiary);
596+ }
597+
598+ /* section.info-bar.single { */
599+ /* border-color: var(--nord2); */
600+ /* } */
601+
602+ .positive {
603+ text-shadow: 1px 1px 5px var(--ayllu-positive);
604+ }
605+
606+ .negative {
607+ text-shadow: 1px 1px 5px var(--ayllu-negative);
608+ }
609+
610+ /* Syntax Highlighting */
611+
612+ section#code-viewer {
613+ color: var(--ayllu-code-viewer);
614+ background-color: var(--ayllu-code-viewer-background);
615+ }
616+
617+ /*
618+ span.ts_operator {}
619+ span.ts_property {}
620+ span.ts_punctuation {}
621+ span.ts_punctuation_bracket {}
622+ span.ts_punctuation_delimiter {}
623+ span.ts_variable_builtin {}
624+ span.ts_variable_parameter {}
625+ */
626+
627+ span.ts_attribute {
628+ color: var(--ts-attribute);
629+ }
630+
631+ span.ts_comment {
632+ color: var(--ts-comment);
633+ }
634+
635+ span.ts_constant {
636+ color: var(--ts-constant);
637+ }
638+
639+ span.ts_function_builtin {
640+ color: var(--ts-function-builtin);
641+ }
642+
643+ span.ts_function {
644+ color: var(--ts-function);
645+ }
646+
647+ span.ts_keyword {
648+ color: var(--ts-keyword);
649+ }
650+
651+ span.ts_string {
652+ color: var(--ts-string);
653+ }
654+
655+ span.ts_string_special {
656+ color: var(--ts-string-special);
657+ }
658+
659+ span.ts_tag {
660+ color: var(--ts-tag);
661+ }
662+
663+ span.ts_type {
664+ color: var(--ts-type);
665+ }
666+
667+ span.ts_type_builtin {
668+ color: var(--ts-type-builtin);
669+ }
670+
671+ span.ts_variable {
672+ color: var(--ts-variable);
673+ }
674+
675+ span.ts_removal {
676+ color: var(--ts-removal);
677+ }
678+
679+ span.ts_addition {
680+ color: var(--ts-addition);
681+ }
682\ No newline at end of file
683 diff --git a/ayllu/themes/nord.css b/ayllu/themes/nord.css
684index 692dbc1..ded02f8 100644
685--- a/ayllu/themes/nord.css
686+++ b/ayllu/themes/nord.css
687 @@ -20,267 +20,68 @@
688 --nord13: #ebcb8b;
689 --nord14: #a3be8c;
690 --nord15: #b48ead;
691- }
692
693- a {
694- color: var(--nord10);
695- }
696+ --ayllu-color: var(--nord0);
697+ --ayllu-background: var(--nord6);
698+ --ayllu-background-secondary: var(--nord4);
699+ --ayllu-background-tertiary: var(--nord5);
700+ --ayllu-link: var(--nord10);
701+ --ayllu-nav: var(--nord6);
702+ --ayllu-nav-link: var(--nord6);
703+ --ayllu-nav-background: var(--nord9);
704+ --ayllu-subnav-background: var(--nord2);
705+ --ayllu-table-header-title: var(--nord4);
706+ --ayllu-table-header-background: var(--nord10);
707+ --ayllu-table-row-primary: var(--nord5);
708+ --ayllu-table-row-secondary: var(--nord6);
709+ --ayllu-selected: var(--nord7);
710+ --ayllu-positive: var(--nord14);
711+ --ayllu-negative: var(--nord11);
712+ --ayllu-section: var(--nord0);
713+ --ayllu-section-header: var(--nord1);
714+ --ayllu-section-background: var(--nord2);
715+ --ayllu-section-border: var(--nord3);
716+ --ayllu-section-link: var(--nord5);
717+ --ayllu-section-header-link: var(--nord4);
718+
719+ --ayllu-selectable-text: var(--nord3);
720+ --ayllu-selectable-text-background: var(--nord9);
721+ --ayllu-selectable-text-background-badge: var(--nord7);
722+
723+ --ayllu-code-viewer: var(--nord0);
724+ --ayllu-code-viewer-background: var(--nord6);
725+
726+ --ts-attribute: var(--nord7);
727+ --ts-comment: var(--nord10);
728+ --ts-constant: var(--nord8);
729+ --ts-function-builtin: var(--nord9);
730+ --ts-function: var(--nord8);
731+ --ts-keyword: var(--nord10);
732+ --ts-string: var(--nord9);
733+ --ts-string-special: var(--nord9);
734+ --ts-tag: var(--nord9);
735+ --ts-type-builtin: var(--nord3);
736+ --ts-variable: var(--nord3);
737+ --ts-removal: var(--nord11);
738+ --ts-addition: var(--nord14);
739+
740+
741+ /* Dark Mode */
742+
743+ @media (prefers-color-scheme: dark) {
744+ --ayllu-color: var(--nord6);
745+ --ayllu-background: var(--nord0);
746+ --ayllu-link: var(--nord14);
747+ --ayllu-section-header-border: var(--nord6);
748+ --ayllu-background-secondary: var(--nord2);
749+ --ayllu-background-tertiary: var(--nord3);
750+
751+ --ayllu-code-viewer: var(--nord5);
752+ --ayllu-code-viewer-background: var(--nord1);
753+
754+ --ayllu-table-row-primary: var(--nord1);
755+ --ayllu-table-row-secondary: var(--nord2);
756
757- body {
758- color: var(--nord0);
759- background-color: var(--nord6);
760- }
761-
762- nav {
763- a {
764- color: var(--nord6);
765- font-weight: bold;
766- font-size: large;
767- }
768-
769- color: var(--nord6);
770- background-color: var(--nord9);
771- }
772-
773- nav.subnav {
774- background-color: var(--nord2);
775- }
776-
777- table.data-table tbody tr:nth-child(odd) {
778- background-color: var(--nord5);
779- }
780-
781- table.data-table tbody tr:nth-child(even) {
782- background-color: var(--nord6);
783- }
784-
785- table.data-table thead {
786- color: var(--nord4);
787- background-color: var(--nord10);
788- }
789-
790- section.selectable-text>span.text {
791- color: var(--nord0);
792- border-color: var(--nord10);
793- background-color: var(--nord5);
794- }
795-
796- section.selectable-text>span.protocol-badge {
797- color: var(--nord6);
798- border-color: var(--nord10);
799- background-color: var(--nord0);
800- }
801-
802- section#readme-header {
803- background-color: var(--nord7);
804- }
805-
806- section>a {
807- color: var(--nord5);
808- }
809-
810- section.info-bar {
811- background-color: var(--nord2);
812- color: var(--nord6);
813- border-color: var(--nord2);
814- }
815-
816- section#commit-summary {
817- background-color: var(--nord4);
818- }
819-
820- section#commit-summary>section>pre {
821- background-color: var(--nord5);
822- }
823-
824- section.info-bar.single {
825- border-color: var(--nord2);
826- }
827-
828- .positive {
829- text-shadow: 1px 1px 5px var(--nord14);
830- }
831-
832- .negative {
833- text-shadow: 1px 1px 5px var(--nord11);
834- }
835-
836- .selected {
837- background-color: var(--nord7) !important;
838- }
839-
840- section.dag {
841- background-color: var(--nord4);
842- }
843-
844- /* Syntax Highlighting */
845-
846- section#code-viewer {
847- color: var(--nord0);
848- background-color: #fff;
849- }
850-
851- /*
852- span.ts_operator {}
853- span.ts_property {}
854- span.ts_punctuation {}
855- span.ts_punctuation_bracket {}
856- span.ts_punctuation_delimiter {}
857- span.ts_variable_builtin {}
858- span.ts_variable_parameter {}
859- */
860-
861- span.ts_attribute {
862- color: var(--nord7);
863- }
864-
865- span.ts_comment {
866- color: var(--nord10);
867- }
868-
869- span.ts_constant {
870- color: var(--nord8);
871- }
872-
873- span.ts_function_builtin {
874- color: var(--nord9);
875- }
876-
877- span.ts_function {
878- color: var(--nord8);
879- }
880-
881- span.ts_keyword {
882- color: var(--nord10);
883- }
884-
885- span.ts_string {
886- color: var(--nord9);
887- }
888-
889- span.ts_string_special {
890- color: var(--nord9);
891- }
892-
893- span.ts_tag {
894- color: var(--nord9);
895- }
896-
897- span.ts_type {
898- color: var(--nord8);
899- }
900-
901- span.ts_type_builtin {
902- color: var(--nord3);
903- }
904-
905- span.ts_variable {
906- color: var(--nord3);
907- }
908-
909- span.ts_removal {
910- color: var(--nord11);
911- }
912-
913- span.ts_addition {
914- color: var(--nord14);
915- }
916-
917- /* Dark Mode */
918-
919- @media (prefers-color-scheme: dark) {
920- a {
921- color: var(--nord5);
922- }
923-
924- body {
925- color: var(--nord4);
926- background-color: var(--nord0);
927- }
928-
929- nav {
930- a {
931- color: var(--nord6);
932- }
933-
934- color: var(--nord6);
935- background-color: var(--nord2);
936- }
937-
938- nav.subnav {
939- background-color: var(--nord3);
940- }
941-
942-
943- section.dag {
944- background-color: var(--nord3);
945- }
946-
947- section.selectable-text>span.text {
948- border-color: var(--nord6);
949- }
950-
951- section.selectable-text>span.protocol-badge {
952- background-color: var(--nord4);
953- color: var(--nord0);
954- border-color: var(--nord6);
955- }
956-
957- section#readme-header {
958- background-color: var(--nord3);
959- }
960-
961- section#tree>table>thead {
962- color: var(--nord0);
963- background-color: var(--nord4);
964- }
965-
966- section#tree tbody tr:nth-child(odd) {
967- background-color: var(--nord1);
968- }
969-
970- section#tree tbody tr:nth-child(even) {
971- background-color: var(--nord2);
972- }
973-
974- table.data-table tbody tr:nth-child(odd) {
975- background-color: var(--nord1);
976- }
977-
978- table.data-table tbody tr:nth-child(even) {
979- background-color: var(--nord2);
980- }
981-
982- section#code-viewer {
983- color: var(--nord5);
984- background-color: var(--nord0);
985- }
986-
987- section.info-bar {
988- background-color: var(--nord9);
989- color: var(--nord5);
990- border-color: var(--nord5);
991- }
992-
993- section.info-bar.single {
994- border-color: var(--nord5);
995- border-bottom-color: var(--nord5);
996- }
997-
998- section>a {
999- color: var(--nord5);
1000- }
1001-
1002- section#commit-summary {
1003- background-color: var(--nord2);
1004- }
1005-
1006- section#commit-summary>section>pre {
1007- background-color: var(--nord3);
1008- }
1009-
1010- span.ts_variable {
1011- color: var(--nord8);
1012 }
1013
1014 }
1015\ No newline at end of file