From 38567944a9d861d50af0edc641ebd7df4a9b4db5 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <mail@karanjayachandra.com>
Date: Sun, 2 Aug 2026 17:47:02 +0200
Subject: Simplified themes

---
 modules/cgit.css | 195 ++++++++++++++++++-------------------------------------
 1 file changed, 63 insertions(+), 132 deletions(-)

(limited to 'modules')

diff --git a/modules/cgit.css b/modules/cgit.css
index c7c030a..2e99bec 100644
--- a/modules/cgit.css
+++ b/modules/cgit.css
@@ -2,7 +2,11 @@
  * CSS custom properties and the same prefers-color-scheme media query
  * technique for automatic light/dark switching, no JS or toggle involved.
  * --border-color, --muted-color and --panel-bg-color are new - homepage's
- * simple prose layout never needed them, but cgit's table-heavy UI does. */
+ * simple prose layout never needed them, but cgit's table-heavy UI does.
+ * The diff/age/ssdiff/notes variables below aren't hue-driven (they're
+ * semantically meaningful - add/del/changed, recency) but still get a
+ * light and dark value here so every theme-conditional color lives in
+ * these two blocks rather than a second copy of the selectors below. */
 :root {
 	--hue: 0;
 	--saturation: 60%;
@@ -13,6 +17,19 @@
 	--border-color: hsl(var(--hue), var(--saturation), 80%);
 	--muted-color: hsl(var(--hue), var(--saturation), 45%);
 	--panel-bg-color: hsl(var(--hue), var(--saturation), 93%);
+	--add-color: #080;
+	--del-color: #c00;
+	--upd-color: #009;
+	--age-days-color: #040;
+	--notes-border-color: #ee9;
+	--notes-bg-color: #ffd;
+	--ssdiff-add-bg: #cfc;
+	--ssdiff-add-dark-bg: #aca;
+	--ssdiff-del-bg: #fcc;
+	--ssdiff-del-dark-bg: #caa;
+	--ssdiff-changed-bg: #ffc;
+	--ssdiff-changed-dark-bg: #cca;
+	--ssdiff-hunk-bg: #ccf;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,6 +41,19 @@
 		--border-color: hsl(var(--hue), var(--saturation), 25%);
 		--muted-color: hsl(var(--hue), var(--saturation), 60%);
 		--panel-bg-color: hsl(var(--hue), var(--saturation), 15%);
+		--add-color: #6c6;
+		--del-color: #c66;
+		--upd-color: #88f;
+		--age-days-color: #4a4;
+		--notes-border-color: #663;
+		--notes-bg-color: #332f14;
+		--ssdiff-add-bg: #143214;
+		--ssdiff-add-dark-bg: #1e4a1e;
+		--ssdiff-del-bg: #3a1414;
+		--ssdiff-del-dark-bg: #4a1e1e;
+		--ssdiff-changed-bg: #33301a;
+		--ssdiff-changed-dark-bg: #4a4526;
+		--ssdiff-hunk-bg: #1a1a33;
 	}
 }
 
@@ -490,9 +520,9 @@ div#cgit div.notes-header {
 div#cgit div.notes {
 	white-space: pre;
 	font-family: monospace;
-	border: solid 1px #ee9;
-	background-color: #ffd;
-	color: #000;
+	border: solid 1px var(--notes-border-color);
+	background-color: var(--notes-bg-color);
+	color: var(--text-color);
 	padding: 0.3em 2em 0.3em 1em;
 	float: left;
 }
@@ -536,15 +566,15 @@ div#cgit table.diffstat td span.modechange {
 }
 
 div#cgit table.diffstat td.add a {
-	color: green;
+	color: var(--add-color);
 }
 
 div#cgit table.diffstat td.del a {
-	color: red;
+	color: var(--del-color);
 }
 
 div#cgit table.diffstat td.upd a {
-	color: blue;
+	color: var(--upd-color);
 }
 
 div#cgit table.diffstat td.graph {
@@ -591,15 +621,15 @@ div#cgit table.diff td div.head {
 }
 
 div#cgit table.diff td div.hunk {
-	color: #009;
+	color: var(--upd-color);
 }
 
 div#cgit table.diff td div.add {
-	color: green;
+	color: var(--add-color);
 }
 
 div#cgit table.diff td div.del {
-	color: red;
+	color: var(--del-color);
 }
 
 div#cgit .oid {
@@ -663,15 +693,15 @@ div#cgit ul.pager .current {
 
 div#cgit span.age-mins {
 	font-weight: bold;
-	color: #080;
+	color: var(--add-color);
 }
 
 div#cgit span.age-hours {
-	color: #080;
+	color: var(--add-color);
 }
 
 div#cgit span.age-days {
-	color: #040;
+	color: var(--age-days-color);
 }
 
 div#cgit span.age-weeks {
@@ -687,11 +717,11 @@ div#cgit span.age-years {
 }
 
 div#cgit span.insertions {
-	color: #080;
+	color: var(--add-color);
 }
 
 div#cgit span.deletions {
-	color: #800;
+	color: var(--del-color);
 }
 
 div#cgit div.footer {
@@ -854,53 +884,53 @@ div#cgit table.ssdiff td {
 }
 
 div#cgit table.ssdiff td.add {
-	color: #000;
-	background: #cfc;
+	color: var(--text-color);
+	background: var(--ssdiff-add-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.add_dark {
-	color: #000;
-	background: #aca;
+	color: var(--text-color);
+	background: var(--ssdiff-add-dark-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.add {
-	background: #cfc;
+	background: var(--ssdiff-add-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.del {
-	color: #000;
-	background: #fcc;
+	color: var(--text-color);
+	background: var(--ssdiff-del-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.del_dark {
-	color: #000;
-	background: #caa;
+	color: var(--text-color);
+	background: var(--ssdiff-del-dark-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.del {
-	background: #fcc;
+	background: var(--ssdiff-del-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.changed {
-	color: #000;
-	background: #ffc;
+	color: var(--text-color);
+	background: var(--ssdiff-changed-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.changed_dark {
-	color: #000;
-	background: #cca;
+	color: var(--text-color);
+	background: var(--ssdiff-changed-dark-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.lineno {
-	color: #000;
+	color: var(--text-color);
 	background: var(--panel-bg-color);
 	text-align: right;
 	width: 3em;
@@ -908,8 +938,8 @@ div#cgit table.ssdiff td.lineno {
 }
 
 div#cgit table.ssdiff td.hunk {
-	color: #000;
-	background: #ccf;
+	color: var(--text-color);
+	background: var(--ssdiff-hunk-bg);
 	border-top: solid 1px var(--border-color);
 	border-bottom: solid 1px var(--border-color);
 }
@@ -921,7 +951,7 @@ div#cgit table.ssdiff td.head {
 
 div#cgit table.ssdiff td.head div.head {
 	font-weight: bold;
-	color: #000;
+	color: var(--text-color);
 }
 
 div#cgit table.ssdiff td.foot {
@@ -938,102 +968,3 @@ div#cgit table.ssdiff td.space {
 div#cgit table.ssdiff td.space div {
 	min-height: 3em;
 }
-
-/* Dark-mode-only adjustments for colors that are semantically meaningful
- * (diff add/del/change, recency-age scale, hunk headers) rather than part of
- * the site's hue-driven palette above - these need their own light/dark
- * pair instead of a var() so diffs and blame stay legible against a near-
- * black background instead of just inheriting the light-mode hue. */
-@media (prefers-color-scheme: dark) {
-	div#cgit span.age-mins,
-	div#cgit span.age-hours {
-		color: #6c6;
-	}
-
-	div#cgit span.age-days {
-		color: #4a4;
-	}
-
-	div#cgit span.insertions {
-		color: #6c6;
-	}
-
-	div#cgit span.deletions {
-		color: #c66;
-	}
-
-	div#cgit table.diffstat td.add a {
-		color: #6c6;
-	}
-
-	div#cgit table.diffstat td.del a {
-		color: #c66;
-	}
-
-	div#cgit table.diffstat td.upd a {
-		color: #88f;
-	}
-
-	div#cgit table.diff td div.hunk {
-		color: #88f;
-	}
-
-	div#cgit table.diff td div.add {
-		color: #6c6;
-	}
-
-	div#cgit table.diff td div.del {
-		color: #c66;
-	}
-
-	div#cgit div.notes {
-		border-color: #663;
-		background-color: #332f14;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.add,
-	div#cgit table.ssdiff span.add {
-		background: #143214;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.add_dark {
-		background: #1e4a1e;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.del,
-	div#cgit table.ssdiff span.del {
-		background: #3a1414;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.del_dark {
-		background: #4a1e1e;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.changed {
-		background: #33301a;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.changed_dark {
-		background: #4a4526;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.hunk {
-		background: #1a1a33;
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.head div.head {
-		color: var(--text-color);
-	}
-
-	div#cgit table.ssdiff td.lineno {
-		color: var(--text-color);
-	}
-}
-- 
cgit v1.3.1