theming: include solarized.css theme addonv1.3.1+12

The solarized.css includes adoption of Solarized Light/Dark themes for
cgit, switching between light and dark variant depending on preferred
color scheme.

It is not used by default, but can be easily switched on with css
directive.

1 files changed, 140 insertions, 0 deletions

diff --git a/solarized.css b/solarized.css
new file mode 100644
index 0000000..2e6e3d4
--- /dev/null
+++ b/solarized.css
@@ -0,0 +1,140 @@
+/*
+ * Solarized theme (Ethan Schoonover) with automatic light/dark selection
+ * based on the prefers-color-scheme media query.
+ *
+ * Must be listed after cgit.css, e.g.
+ *
+ *   css=/cgit.css
+ *   css=/solarized.css
+ */
+
+:root {
+	--sol-base03: #002b36;
+	--sol-base02: #073642;
+	--sol-base01: #586e75;
+	--sol-base00: #657b83;
+	--sol-base0:  #839496;
+	--sol-base1:  #93a1a1;
+	--sol-base2:  #eee8d5;
+	--sol-base3:  #fdf6e3;
+
+	--sol-yellow:  #b58900;
+	--sol-orange:  #cb4b16;
+	--sol-red:     #dc322f;
+	--sol-magenta: #d33682;
+	--sol-violet:  #6c71c4;
+	--sol-blue:    #268bd2;
+	--sol-cyan:    #2aa198;
+	--sol-green:   #859900;
+
+	--sol-canvas: var(--sol-base3);
+	--sol-panel: var(--sol-base2);
+	--sol-body: var(--sol-base00);
+	--sol-emph: var(--sol-base01);
+	--sol-muted: var(--sol-base0);
+	--sol-secondary: var(--sol-base1);
+	--sol-shade: var(--sol-base03);
+	--sol-page: var(--sol-panel);
+
+	--sol-tint-soft: 18%;
+	--sol-tint: 25%;
+	--sol-tint-strong: 45%;
+
+	color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--sol-canvas: var(--sol-base03);
+		--sol-panel: var(--sol-base02);
+		--sol-body: var(--sol-base0);
+		--sol-emph: var(--sol-base1);
+		--sol-muted: var(--sol-base00);
+		--sol-secondary: var(--sol-base01);
+		--sol-shade: var(--sol-base3);
+
+		--sol-tint-soft: 30%;
+		--sol-tint: 35%;
+		--sol-tint-strong: 55%;
+	}
+}
+
+body:has(> div#cgit) {
+	margin: 0;
+	background-color: var(--sol-page);
+}
+
+div#cgit {
+	--bg: var(--sol-canvas);
+	--bg-zebra: color-mix(in srgb, var(--sol-panel) 40%, var(--sol-canvas));
+	--bg-hl: var(--sol-panel);
+	--bg-hl2: color-mix(in srgb, var(--sol-panel) 85%, var(--sol-shade));
+	--fg: var(--sol-body);
+	--fg-strong: var(--sol-emph);
+	--fg-mid: var(--sol-body);
+	--fg-mute: var(--sol-muted);
+	--fg-dim: var(--sol-secondary);
+	--fg-faint: color-mix(in srgb, var(--sol-secondary) 65%, var(--sol-canvas));
+	--fg-faintest: color-mix(in srgb, var(--sol-secondary) 45%, var(--sol-canvas));
+	--fg-on-tint: var(--sol-emph);
+	--fg-linenum: var(--sol-secondary);
+	--border: var(--sol-panel);
+	--border-mid: var(--sol-secondary);
+	--border-dark: var(--sol-muted);
+	--border-strong: var(--sol-emph);
+
+	--red: var(--sol-red);
+	--red-mid: color-mix(in srgb, var(--sol-red) 75%, var(--sol-shade));
+	--red-dark: color-mix(in srgb, var(--sol-red) 55%, var(--sol-shade));
+	--green: var(--sol-green);
+	--green-mid: color-mix(in srgb, var(--sol-green) 70%, var(--sol-shade));
+	--green-dark: color-mix(in srgb, var(--sol-green) 50%, var(--sol-shade));
+	--blue: var(--sol-blue);
+	--blue-dark: color-mix(in srgb, var(--sol-blue) 70%, var(--sol-shade));
+
+	--graph-col1: var(--sol-red);
+	--graph-col2: var(--sol-green);
+	--graph-col3: var(--sol-yellow);
+	--graph-col4: var(--sol-blue);
+	--graph-col5: var(--sol-magenta);
+	--graph-col6: var(--sol-cyan);
+
+	--graph-add-bg: var(--sol-green);
+	--graph-rem-bg: var(--sol-red);
+
+	--notes-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint-soft), var(--sol-canvas));
+	--notes-border: var(--sol-yellow);
+	--add-bg: color-mix(in srgb, var(--sol-green) var(--sol-tint), var(--sol-canvas));
+	--add-bg-dark: color-mix(in srgb, var(--sol-green) var(--sol-tint-strong), var(--sol-canvas));
+	--del-bg: color-mix(in srgb, var(--sol-red) var(--sol-tint), var(--sol-canvas));
+	--del-bg-dark: color-mix(in srgb, var(--sol-red) var(--sol-tint-strong), var(--sol-canvas));
+	--changed-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint), var(--sol-canvas));
+	--changed-bg-dark: color-mix(in srgb, var(--sol-yellow) var(--sol-tint-strong), var(--sol-canvas));
+	--hunk-bg: color-mix(in srgb, var(--sol-blue) var(--sol-tint), var(--sol-canvas));
+
+	--deco-branch-bg: color-mix(in srgb, var(--sol-green) var(--sol-tint-soft), var(--sol-canvas));
+	--deco-branch-border: var(--sol-green);
+	--deco-tag-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint-soft), var(--sol-canvas));
+	--deco-tag-border: var(--sol-yellow);
+	--deco-tag-annotated-bg: color-mix(in srgb, var(--sol-orange) var(--sol-tint-soft), var(--sol-canvas));
+	--deco-tag-annotated-border: var(--sol-yellow);
+	--deco-remote-bg: color-mix(in srgb, var(--sol-violet) var(--sol-tint-soft), var(--sol-canvas));
+	--deco-remote-border: var(--sol-violet);
+	--deco-other-bg: color-mix(in srgb, var(--sol-red) var(--sol-tint-soft), var(--sol-canvas));
+	--deco-other-border: var(--sol-red);
+
+	--syn-keyword: var(--sol-emph);
+	--syn-keyword-alt: var(--sol-blue);
+	--syn-type: var(--blue-dark);
+	--syn-string: var(--sol-red);
+	--syn-string-alt: var(--sol-green);
+	--syn-escape: var(--sol-magenta);
+	--syn-comment: var(--sol-secondary);
+	--syn-number: var(--sol-yellow);
+	--syn-preproc: var(--green-mid);
+	--syn-operator: var(--sol-emph);
+	--syn-interpolation: var(--sol-blue);
+	--syn-linenum: var(--sol-secondary);
+	--syn-error: var(--sol-red);
+	--syn-mark-bg: color-mix(in srgb, var(--sol-yellow) var(--sol-tint), var(--sol-canvas));
+}