style: replace hardcoded color codes with css variablesv1.3.1+10

In order to: a) do custom theme simpler by just replacing necessary
vars, b) apply this theme to filters as well; the main cgit.css file now
defines CSS vars and uses them in color parameters.

6 files changed, 382 insertions, 163 deletions

diff --git a/.gitignore b/.gitignore
index 661df34..084a985 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ cgitrc.5.pdf
 cgitrc.5.xml
 *.o
 *.d
+__pycache__/
diff --git a/README.md b/README.md
index d4092ee..f3b8724 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ This is a custom expansion to cgit. Its most prominent changes by now are:
 
 * CI/CD tab, linking to an external service on ref pages by using template. The Jenkins plugin is added to support a scenario when a ref lacks a pipeline.
 
+* Theming now relies on CSS variables set in cgit.css, to allow easier custom additions and implicit filter theming.
+
 The original cgit project is hosted at [git.zx2c4.com](https://git.zx2c4.com/cgit/about/)
 
 ## cgit - CGI for Git
diff --git a/cgit.css b/cgit.css
index d10a24d..e52d424 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,15 +1,88 @@
 div#cgit {
+	--bg: white;
+	--bg-zebra: #f7f7f7;
+	--bg-hl: #eee;
+	--bg-hl2: #ccc;
+	--fg: #333;
+	--fg-strong: #000;
+	--fg-mid: #444;
+	--fg-mute: #777;
+	--fg-dim: #888;
+	--fg-faint: #bbb;
+	--fg-faintest: #ccc;
+	--fg-on-tint: black;
+	--fg-linenum: gray;
+	--border: #ccc;
+	--border-mid: #aaa;
+	--border-dark: #777;
+	--border-strong: black;
+
+	--red: red;
+	--red-mid: #c00;
+	--red-dark: #800;
+	--green: green;
+	--green-mid: #080;
+	--green-dark: #040;
+	--blue: blue;
+	--blue-dark: #009;
+
+	--graph-col1: #a00;
+	--graph-col2: #0a0;
+	--graph-col3: #aa0;
+	--graph-col4: #00a;
+	--graph-col5: #a0a;
+	--graph-col6: #0aa;
+
+	--graph-add-bg: #5c5;
+	--graph-rem-bg: #c55;
+
+	--notes-bg: #ffd;
+	--notes-border: #ee9;
+	--add-bg: #cfc;
+	--add-bg-dark: #aca;
+	--del-bg: #fcc;
+	--del-bg-dark: #caa;
+	--changed-bg: #ffc;
+	--changed-bg-dark: #cca;
+	--hunk-bg: #ccf;
+
+	--deco-branch-bg: #8f8;
+	--deco-branch-border: #070;
+	--deco-tag-bg: #ff8;
+	--deco-tag-border: #770;
+	--deco-tag-annotated-bg: #fc8;
+	--deco-tag-annotated-border: #770;
+	--deco-remote-bg: #ccf;
+	--deco-remote-border: #007;
+	--deco-other-bg: #f88;
+	--deco-other-border: #700;
+
+    --syn-keyword: #000;
+    --syn-keyword-alt: #0057ae;
+    --syn-type: #010181;
+    --syn-string: #bf0303;
+    --syn-string-alt: #818100;
+    --syn-escape: #f0f;
+    --syn-comment: #838183;
+    --syn-number: #b07e00;
+    --syn-preproc: #008200;
+    --syn-operator: #000;
+    --syn-interpolation: #0057ae;
+    --syn-linenum: #555;
+    --syn-error: #bf0303;
+    --syn-mark-bg: #ffb;
+
 	padding: 0em;
 	margin: 0em;
 	font-family: sans-serif;
 	font-size: 10pt;
-	color: #333;
-	background: white;
+	color: var(--fg);
+	background: var(--bg);
 	padding: 4px;
 }
 
 div#cgit a {
-	color: blue;
+	color: var(--blue);
 	text-decoration: none;
 }
 
@@ -38,7 +111,7 @@ div#cgit table#header td.main {
 }
 
 div#cgit table#header td.main a {
-	color: #000;
+	color: var(--fg-strong);
 }
 
 div#cgit table#header td.form {
@@ -56,13 +129,13 @@ div#cgit table#header td.form select {
 }
 
 div#cgit table#header td.sub {
-	color: #777;
-	border-top: solid 1px #ccc;
+	color: var(--fg-mute);
+	border-top: solid 1px var(--border);
 	padding-left: 10px;
 }
 
 div#cgit table.tabs {
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px var(--border);
 	border-collapse: collapse;
 	margin-top: 2em;
 	margin-bottom: 0px;
@@ -76,13 +149,13 @@ div#cgit table.tabs td {
 
 div#cgit table.tabs td a {
 	padding: 2px 0.75em;
-	color: #777;
+	color: var(--fg-mute);
 	font-size: 110%;
 }
 
 div#cgit table.tabs td a.active {
-	color: #000;
-	background-color: #ccc;
+	color: var(--fg-strong);
+	background-color: var(--bg-hl2);
 }
 
 div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
@@ -109,14 +182,14 @@ div#cgit table.tabs td.form select {
 div#cgit div.path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
-	color: #000;
-	background-color: #eee;
+	color: var(--fg-strong);
+	background-color: var(--bg-hl);
 }
 
 div#cgit div.content {
 	margin: 0px;
 	padding: 2em;
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px var(--border);
 }
 
 
@@ -127,46 +200,46 @@ div#cgit table.list {
 }
 
 div#cgit table.list tr {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr.logheader {
-	background: #eee;
+	background: var(--bg-hl);
 }
 
 div#cgit table.list tr:nth-child(even) {
-	background: #f7f7f7;
+	background: var(--bg-zebra);
 }
 
 div#cgit table.list tr:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr:hover {
-	background: #eee;
+	background: var(--bg-hl);
 }
 
 div#cgit table.list tr.nohover {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr.nohover:hover {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
-	background: #f7f7f7;
+	background: var(--bg-zebra);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.list th {
 	font-weight: bold;
-	/* color: #888;
-	border-top: dashed 1px #888;
-	border-bottom: dashed 1px #888;
+	/* color: var(--fg-dim);
+	border-top: dashed 1px var(--fg-dim);
+	border-bottom: dashed 1px var(--fg-dim);
 	*/
 	padding: 0.1em 0.5em 0.05em 0.5em;
 	vertical-align: baseline;
@@ -183,27 +256,27 @@ div#cgit table.list td.commitgraph {
 }
 
 div#cgit table.list td.commitgraph .column1 {
-	color: #a00;
+	color: var(--graph-col1);
 }
 
 div#cgit table.list td.commitgraph .column2 {
-	color: #0a0;
+	color: var(--graph-col2);
 }
 
 div#cgit table.list td.commitgraph .column3 {
-	color: #aa0;
+	color: var(--graph-col3);
 }
 
 div#cgit table.list td.commitgraph .column4 {
-	color: #00a;
+	color: var(--graph-col4);
 }
 
 div#cgit table.list td.commitgraph .column5 {
-	color: #a0a;
+	color: var(--graph-col5);
 }
 
 div#cgit table.list td.commitgraph .column6 {
-	color: #0aa;
+	color: var(--graph-col6);
 }
 
 div#cgit table.list td.logsubject {
@@ -218,16 +291,16 @@ div#cgit table.list td.logmsg {
 }
 
 div#cgit table.list td a {
-	color: black;
+	color: var(--fg-strong);
 }
 
 div#cgit table.list td a.ls-dir {
 	font-weight: bold;
-	color: #00f;
+	color: var(--blue);
 }
 
 div#cgit table.list td a:hover {
-	color: #00f;
+	color: var(--blue);
 }
 
 div#cgit img {
@@ -261,21 +334,21 @@ div#cgit div#summary {
 div#cgit table#downloads {
 	float: right;
 	border-collapse: collapse;
-	border: solid 1px #777;
+	border: solid 1px var(--border-dark);
 	margin-left: 0.5em;
 	margin-bottom: 0.5em;
 }
 
 div#cgit table#downloads th {
-	background-color: #ccc;
+	background-color: var(--bg-hl2);
 }
 
 div#cgit div#blob {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit div.error {
-	color: red;
+	color: var(--red);
 	font-weight: bold;
 	margin: 1em 2em;
 }
@@ -297,21 +370,21 @@ div#cgit td.ls-mode {
 
 div#cgit table.blob {
 	margin-top: 0.5em;
-	border-top: solid 1px black;
+	border-top: solid 1px var(--border-strong);
 }
 
 div#cgit table.blob td.hashes,
 div#cgit table.blob td.lines {
 	margin: 0; padding: 0 0 0 0.5em;
 	vertical-align: top;
-	color: black;
+	color: var(--fg-strong);
 }
 
 div#cgit table.blob td.linenumbers {
 	margin: 0; padding: 0 0.5em 0 0.5em;
 	vertical-align: top;
 	text-align: right;
-	border-right: 1px solid gray;
+	border-right: 1px solid var(--fg-linenum);
 }
 
 div#cgit table.blob pre {
@@ -320,18 +393,18 @@ div#cgit table.blob pre {
 
 div#cgit table.blob td.linenumbers a,
 div#cgit table.ssdiff td.lineno a {
-	color: gray;
+	color: var(--fg-linenum);
 	text-align: right;
 	text-decoration: none;
 }
 
 div#cgit table.blob td.linenumbers a:hover,
 div#cgit table.ssdiff td.lineno a:hover {
-	color: black;
+	color: var(--fg-strong);
 }
 
 div#cgit table.blob td.linenumbers a:target:before {
-	color: red;
+	color: var(--red);
 	content: "\2BA9";
 }
 
@@ -351,11 +424,11 @@ div#cgit table.blame td.linenumbers div.alt {
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #eee;
+	background: var(--bg-hl);
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: white;
+	background: var(--bg);
 }
 
 div#cgit table.blame td.lines > div {
@@ -374,20 +447,20 @@ div#cgit table.blame .oid {
 
 div#cgit table.bin-blob {
 	margin-top: 0.5em;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit table.bin-blob th {
 	font-family: monospace;
 	white-space: pre;
-	border: solid 1px #777;
+	border: solid 1px var(--border-dark);
 	padding: 0.5em 1em;
 }
 
 div#cgit table.bin-blob td {
 	font-family: monospace;
 	white-space: pre;
-	border-left: solid 1px #777;
+	border-left: solid 1px var(--border-dark);
 	padding: 0em 1em;
 }
 
@@ -407,8 +480,8 @@ div#cgit div.cgit-panel {
 
 div#cgit div.cgit-panel table {
 	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
+	border: solid 1px var(--border-mid);
+	background-color: var(--bg-hl);
 }
 
 div#cgit div.cgit-panel th {
@@ -459,8 +532,8 @@ div#cgit div.notes-header {
 div#cgit div.notes {
 	white-space: pre;
 	font-family: monospace;
-	border: solid 1px #ee9;
-	background-color: #ffd;
+	border: solid 1px var(--notes-border);
+	background-color: var(--notes-bg);
 	padding: 0.3em 2em 0.3em 1em;
 	float: left;
 }
@@ -476,8 +549,8 @@ div#cgit div.diffstat-header {
 
 div#cgit table.diffstat {
 	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
+	border: solid 1px var(--border-mid);
+	background-color: var(--bg-hl);
 }
 
 div#cgit table.diffstat th {
@@ -500,19 +573,19 @@ div#cgit table.diffstat td.mode {
 
 div#cgit table.diffstat td span.modechange {
 	padding-left: 1em;
-	color: red;
+	color: var(--red);
 }
 
 div#cgit table.diffstat td.add a {
-	color: green;
+	color: var(--green);
 }
 
 div#cgit table.diffstat td.del a {
-	color: red;
+	color: var(--red);
 }
 
 div#cgit table.diffstat td.upd a {
-	color: blue;
+	color: var(--blue);
 }
 
 div#cgit table.diffstat td.graph {
@@ -531,15 +604,15 @@ div#cgit table.diffstat td.graph td {
 }
 
 div#cgit table.diffstat td.graph td.add {
-	background-color: #5c5;
+	background-color: var(--graph-add-bg);
 }
 
 div#cgit table.diffstat td.graph td.rem {
-	background-color: #c55;
+	background-color: var(--graph-rem-bg);
 }
 
 div#cgit div.diffstat-summary {
-	color: #888;
+	color: var(--fg-dim);
 	padding-top: 0.5em;
 }
 
@@ -555,19 +628,19 @@ div#cgit table.diff td {
 div#cgit table.diff td div.head {
 	font-weight: bold;
 	margin-top: 1em;
-	color: black;
+	color: var(--fg-strong);
 }
 
 div#cgit table.diff td div.hunk {
-	color: #009;
+	color: var(--blue-dark);
 }
 
 div#cgit table.diff td div.add {
-	color: green;
+	color: var(--green);
 }
 
 div#cgit table.diff td div.del {
-	color: red;
+	color: var(--red);
 }
 
 div#cgit .oid {
@@ -585,7 +658,7 @@ div#cgit .right {
 
 div#cgit table.list td.reposection {
 	font-style: italic;
-	color: #888;
+	color: var(--fg-dim);
 }
 
 div#cgit a.button {
@@ -622,7 +695,7 @@ div#cgit ul.pager li {
 }
 
 div#cgit ul.pager a {
-	color: #777;
+	color: var(--fg-mute);
 }
 
 div#cgit ul.pager .current {
@@ -631,46 +704,46 @@ div#cgit ul.pager .current {
 
 div#cgit span.age-mins {
 	font-weight: bold;
-	color: #080;
+	color: var(--green-mid);
 }
 
 div#cgit span.age-hours {
-	color: #080;
+	color: var(--green-mid);
 }
 
 div#cgit span.age-days {
-	color: #040;
+	color: var(--green-dark);
 }
 
 div#cgit span.age-weeks {
-	color: #444;
+	color: var(--fg-mid);
 }
 
 div#cgit span.age-months {
-	color: #888;
+	color: var(--fg-dim);
 }
 
 div#cgit span.age-years {
-	color: #bbb;
+	color: var(--fg-faint);
 }
 
 div#cgit span.insertions {
-	color: #080;
+	color: var(--green-mid);
 }
 
 div#cgit span.deletions {
-	color: #800;
+	color: var(--red-dark);
 }
 
 div#cgit div.footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
-	color: #ccc;
+	color: var(--fg-faintest);
 }
 
 div#cgit div.footer a {
-	color: #ccc;
+	color: var(--fg-faintest);
 	text-decoration: none;
 }
 
@@ -679,47 +752,47 @@ div#cgit div.footer a:hover {
 }
 
 div#cgit a.branch-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #88ff88;
-	border: solid 1px #007700;
+	background-color: var(--deco-branch-bg);
+	border: solid 1px var(--deco-branch-border);
 	border-radius: 2px;
 }
 
 div#cgit a.tag-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffff88;
-	border: solid 1px #777700;
+	background-color: var(--deco-tag-bg);
+	border: solid 1px var(--deco-tag-border);
 	border-radius: 2px;
 }
 
 div#cgit a.tag-annotated-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffcc88;
-	border: solid 1px #777700;
+	background-color: var(--deco-tag-annotated-bg);
+	border: solid 1px var(--deco-tag-annotated-border);
 	border-radius: 2px;
 }
 
 div#cgit a.remote-deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ccccff;
-	border: solid 1px #000077;
+	background-color: var(--deco-remote-bg);
+	border: solid 1px var(--deco-remote-border);
 	border-radius: 2px;
 }
 
 div#cgit a.deco {
-	color: #000;
+	color: var(--fg-strong);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ff8888;
-	border: solid 1px #770000;
+	background-color: var(--deco-other-bg);
+	border: solid 1px var(--deco-other-border);
 	border-radius: 2px;
 }
 
@@ -733,21 +806,21 @@ div#cgit div.commit-subject a.deco {
 }
 
 div#cgit table.stats {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	border-collapse: collapse;
 }
 
 div#cgit table.stats th {
 	text-align: left;
 	padding: 1px 0.5em;
-	background-color: #eee;
-	border: solid 1px black;
+	background-color: var(--bg-hl);
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit table.stats td {
 	text-align: right;
 	padding: 1px 0.5em;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 }
 
 div#cgit table.stats td.total {
@@ -756,9 +829,9 @@ div#cgit table.stats td.total {
 }
 
 div#cgit table.stats td.sum {
-	color: #c00;
+	color: var(--red-mid);
 	font-weight: bold;
-/*	background-color: #eee; */
+/*	background-color: var(--bg-hl); */
 }
 
 div#cgit table.stats td.left {
@@ -767,14 +840,14 @@ div#cgit table.stats td.left {
 
 div#cgit table.vgraph {
 	border-collapse: separate;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	height: 200px;
 }
 
 div#cgit table.vgraph th {
-	background-color: #eee;
+	background-color: var(--bg-hl);
 	font-weight: bold;
-	border: solid 1px white;
+	border: solid 1px var(--bg);
 	padding: 1px 0.5em;
 }
 
@@ -784,18 +857,18 @@ div#cgit table.vgraph td {
 }
 
 div#cgit table.vgraph div.bar {
-	background-color: #eee;
+	background-color: var(--bg-hl);
 }
 
 div#cgit table.hgraph {
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	width: 800px;
 }
 
 div#cgit table.hgraph th {
-	background-color: #eee;
+	background-color: var(--bg-hl);
 	font-weight: bold;
-	border: solid 1px black;
+	border: solid 1px var(--border-strong);
 	padding: 1px 0.5em;
 }
 
@@ -805,7 +878,7 @@ div#cgit table.hgraph td {
 }
 
 div#cgit table.hgraph div.bar {
-	background-color: #eee;
+	background-color: var(--bg-hl);
 	height: 1em;
 }
 
@@ -818,83 +891,83 @@ div#cgit table.ssdiff td {
 	font-family: monospace;
 	white-space: pre;
 	padding: 1px 4px 1px 4px;
-	border-left: solid 1px #aaa;
-	border-right: solid 1px #aaa;
+	border-left: solid 1px var(--border-mid);
+	border-right: solid 1px var(--border-mid);
 }
 
 div#cgit table.ssdiff td.add {
-	color: black;
-	background: #cfc;
+	color: var(--fg-on-tint);
+	background: var(--add-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.add_dark {
-	color: black;
-	background: #aca;
+	color: var(--fg-on-tint);
+	background: var(--add-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.add {
-	background: #cfc;
+	background: var(--add-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.del {
-	color: black;
-	background: #fcc;
+	color: var(--fg-on-tint);
+	background: var(--del-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.del_dark {
-	color: black;
-	background: #caa;
+	color: var(--fg-on-tint);
+	background: var(--del-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.del {
-	background: #fcc;
+	background: var(--del-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.changed {
-	color: black;
-	background: #ffc;
+	color: var(--fg-on-tint);
+	background: var(--changed-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.changed_dark {
-	color: black;
-	background: #cca;
+	color: var(--fg-on-tint);
+	background: var(--changed-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.lineno {
-	color: black;
-	background: #eee;
+	color: var(--fg-on-tint);
+	background: var(--bg-hl);
 	text-align: right;
 	width: 3em;
 	min-width: 3em;
 }
 
 div#cgit table.ssdiff td.hunk {
-	color: black;
-	background: #ccf;
-	border-top: solid 1px #aaa;
-	border-bottom: solid 1px #aaa;
+	color: var(--fg-on-tint);
+	background: var(--hunk-bg);
+	border-top: solid 1px var(--border-mid);
+	border-bottom: solid 1px var(--border-mid);
 }
 
 div#cgit table.ssdiff td.head {
-	border-top: solid 1px #aaa;
-	border-bottom: solid 1px #aaa;
+	border-top: solid 1px var(--border-mid);
+	border-bottom: solid 1px var(--border-mid);
 }
 
 div#cgit table.ssdiff td.head div.head {
 	font-weight: bold;
-	color: black;
+	color: var(--fg-on-tint);
 }
 
 div#cgit table.ssdiff td.foot {
-	border-top: solid 1px #aaa;
+	border-top: solid 1px var(--border-mid);
 	border-left: none;
 	border-right: none;
 	border-bottom: none;
@@ -907,3 +980,63 @@ div#cgit table.ssdiff td.space {
 div#cgit table.ssdiff td.space div {
 	min-height: 3em;
 }
+
+div#cgit .hl.kwa,
+div#cgit .hl.kwc {
+  color: var(--syn-keyword);
+  font-weight: bold;
+}
+
+div#cgit .hl.kwb {
+  color: var(--syn-keyword-alt);
+}
+
+div#cgit .hl.kwd {
+  color: var(--syn-type);
+}
+
+div#cgit .hl.str {
+  color: var(--syn-string);
+}
+
+div#cgit .hl.dstr,
+div#cgit .hl.pps {
+  color: var(--syn-string-alt);
+}
+
+div#cgit .hl.esc {
+  color: var(--syn-escape);
+}
+
+div#cgit .hl.com,
+div#cgit .hl.slc {
+  color: var(--syn-comment);
+  font-style: italic;
+}
+
+div#cgit .hl.num {
+  color: var(--syn-number);
+}
+
+div#cgit .hl.dir,
+div#cgit .hl.ppc {
+  color: var(--syn-preproc);
+}
+
+div#cgit .hl.opt,
+div#cgit .hl.sym {
+  color: var(--syn-operator);
+}
+
+div#cgit .hl.ipl {
+  color: var(--syn-interpolation);
+}
+
+div#cgit .hl.lin,
+div#cgit .hl.line {
+  color: var(--syn-linenum);
+}
+
+div#cgit .hl.mark {
+  background-color: var(--syn-mark-bg);
+}
diff --git a/filters/html-converters/md2html b/filters/html-converters/md2html
index 59f43a8..4f6ad37 100755
--- a/filters/html-converters/md2html
+++ b/filters/html-converters/md2html
@@ -2,8 +2,46 @@
 import markdown
 import sys
 import io
-from pygments.formatters import HtmlFormatter
 from markdown.extensions.toc import TocExtension
+
+# Pygments' token classes, mapped onto the --syn-* custom properties that
+# cgit.css defines. The fallbacks are the palette those properties default to,
+# so that the output stays readable under a stylesheet without them.
+SYNTAX_COLORS = (
+	(('k', 'kc', 'kd', 'kn', 'kr'), '--syn-keyword', '#000',
+		'font-weight: bold'),
+	(('kp',), '--syn-keyword', '#000', None),
+	(('kt',), '--syn-type', '#010181', None),
+	(('nc', 'nf', 'nn', 'ne'), '--syn-keyword-alt', '#0057ae', None),
+	(('s', 'sa', 'sb', 'sc', 'dl', 'sd', 's2', 'sh', 'sx', 'sr', 's1', 'ss'),
+		'--syn-string', '#bf0303', None),
+	(('se',), '--syn-escape', '#f0f', None),
+	(('si',), '--syn-interpolation', '#0057ae', None),
+	(('c', 'ch', 'cm', 'c1', 'cs'), '--syn-comment', '#838183',
+		'font-style: italic'),
+	(('cp', 'cpf'), '--syn-preproc', '#008200', None),
+	(('m', 'mb', 'mf', 'mh', 'mi', 'mo', 'il'), '--syn-number', '#b07e00',
+		None),
+	(('o', 'ow', 'p'), '--syn-operator', '#000', None),
+	(('err',), '--syn-error', '#bf0303', None),
+	(('gd',), '--red', 'red', None),
+	(('gi',), '--green', 'green', None),
+	(('lineno', 'linenos'), '--syn-linenum', '#555', None),
+)
+
+
+def style_defs(prefix='.highlight'):
+	rules = []
+	for classes, prop, fallback, extra in SYNTAX_COLORS:
+		selector = ', '.join('%s .%s' % (prefix, c) for c in classes)
+		decls = 'color: var(%s, %s)' % (prop, fallback)
+		if extra:
+			decls += '; ' + extra
+		rules.append('%s { %s }' % (selector, decls))
+	rules.append('%s .hll { background-color: var(--syn-mark-bg, #ffb) }'
+		% prefix)
+	return '\n'.join(rules) + '\n'
+
 sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding='utf-8')
 sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
 sys.stdout.write('''
@@ -20,7 +58,7 @@ sys.stdout.write('''
     margin-bottom: 0 !important;
 }
 .markdown-body a.absent {
-    color: #c00;
+    color: var(--red-mid, #c00);
 }
 .markdown-body a.anchor {
     display: block;
@@ -42,7 +80,7 @@ sys.stdout.write('''
 }
 .markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link, .markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
     display: none;
-    color: #000;
+    color: var(--fg-strong, #000);
 }
 .markdown-body h1:hover a.anchor, .markdown-body h2:hover a.anchor, .markdown-body h3:hover a.anchor, .markdown-body h4:hover a.anchor, .markdown-body h5:hover a.anchor, .markdown-body h6:hover a.anchor {
     text-decoration: none;
@@ -55,19 +93,19 @@ sys.stdout.write('''
     display: inline-block;
 }
 div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#cgit .markdown-body h3 a.toclink, div#cgit .markdown-body h4 a.toclink, div#cgit .markdown-body h5 a.toclink, div#cgit .markdown-body h6 a.toclink {
-    color: black;
+    color: var(--fg-strong, #000);
 }
 .markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code {
     font-size: inherit;
 }
 .markdown-body h1 {
     font-size: 28px;
-    color: #000;
+    color: var(--fg-strong, #000);
 }
 .markdown-body h2 {
     font-size: 24px;
-    border-bottom: 1px solid #ccc;
-    color: #000;
+    border-bottom: 1px solid var(--border, #ccc);
+    color: var(--fg-strong, #000);
 }
 .markdown-body h3 {
     font-size: 18px;
@@ -79,14 +117,14 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     font-size: 14px;
 }
 .markdown-body h6 {
-    color: #777;
+    color: var(--fg-mute, #777);
     font-size: 14px;
 }
 .markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre {
     margin: 15px 0;
 }
 .markdown-body hr {
-    border: 2px solid #ccc;
+    border: 2px solid var(--border, #ccc);
 }
 .markdown-body>h2:first-child, .markdown-body>h1:first-child, .markdown-body>h1:first-child+h2, .markdown-body>h3:first-child, .markdown-body>h4:first-child, .markdown-body>h5:first-child, .markdown-body>h6:first-child {
     margin-top: 0;
@@ -148,9 +186,9 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     margin-bottom: 0px;
 }
 .markdown-body blockquote {
-    border-left: 4px solid #DDD;
+    border-left: 4px solid var(--border, #ddd);
     padding: 0 15px;
-    color: #777;
+    color: var(--fg-mute, #777);
 }
 .markdown-body blockquote>:first-child {
     margin-top: 0px;
@@ -162,15 +200,15 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     font-weight: bold;
 }
 .markdown-body table th, .markdown-body table td {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border, #ccc);
     padding: 6px 13px;
 }
 .markdown-body table tr {
-    border-top: 1px solid #ccc;
-    background-color: #fff;
+    border-top: 1px solid var(--border, #ccc);
+    background-color: var(--bg, #fff);
 }
 .markdown-body table tr:nth-child(2n) {
-    background-color: #f8f8f8;
+    background-color: var(--bg-zebra, #f8f8f8);
 }
 .markdown-body img {
     max-width: 100%;
@@ -182,7 +220,7 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     overflow: hidden;
 }
 .markdown-body span.frame>span {
-    border: 1px solid #ddd;
+    border: 1px solid var(--border, #ddd);
     display: block;
     float: left;
     overflow: hidden;
@@ -196,7 +234,7 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
 }
 .markdown-body span.frame span span {
     clear: both;
-    color: #333;
+    color: var(--fg, #333);
     display: block;
     padding: 5px 0 0;
 }
@@ -254,8 +292,8 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
 .markdown-body code, .markdown-body tt {
     margin: 0 2px;
     padding: 0px 5px;
-    border: 1px solid #eaeaea;
-    background-color: #f8f8f8;
+    border: 1px solid var(--border, #eaeaea);
+    background-color: var(--bg-zebra, #f8f8f8);
     border-radius: 3px;
 }
 .markdown-body code {
@@ -269,8 +307,8 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     background: transparent;
 }
 .markdown-body .highlight pre, .markdown-body pre {
-    background-color: #f8f8f8;
-    border: 1px solid #ccc;
+    background-color: var(--bg-zebra, #f8f8f8);
+    border: 1px solid var(--border, #ccc);
     font-size: 13px;
     line-height: 19px;
     overflow: auto;
@@ -284,9 +322,9 @@ div#cgit .markdown-body h1 a.toclink, div#cgit .markdown-body h2 a.toclink, div#
     border: none;
 }
 ''')
-sys.stdout.write(HtmlFormatter(style='pastie').get_style_defs('.highlight'))
+sys.stdout.write(style_defs('.highlight'))
 sys.stdout.write('''
-</style>   
+</style>
 ''')
 sys.stdout.write("<div class='markdown-body'>")
 sys.stdout.flush()
diff --git a/filters/syntax-highlighting.py b/filters/syntax-highlighting.py
index e912594..d757e2d 100755
--- a/filters/syntax-highlighting.py
+++ b/filters/syntax-highlighting.py
@@ -30,11 +30,50 @@ from pygments.lexers import guess_lexer_for_filename
 from pygments.formatters import HtmlFormatter
 
 
+# Pygments' token classes, mapped onto the --syn-* custom properties that
+# cgit.css defines. The fallbacks are the palette those properties default to,
+# so that the output stays readable under a stylesheet without them.
+SYNTAX_COLORS = (
+	(('k', 'kc', 'kd', 'kn', 'kr'), '--syn-keyword', '#000',
+		'font-weight: bold'),
+	(('kp',), '--syn-keyword', '#000', None),
+	(('kt',), '--syn-type', '#010181', None),
+	(('nc', 'nf', 'nn', 'ne'), '--syn-keyword-alt', '#0057ae', None),
+	(('s', 'sa', 'sb', 'sc', 'dl', 'sd', 's2', 'sh', 'sx', 'sr', 's1', 'ss'),
+		'--syn-string', '#bf0303', None),
+	(('se',), '--syn-escape', '#f0f', None),
+	(('si',), '--syn-interpolation', '#0057ae', None),
+	(('c', 'ch', 'cm', 'c1', 'cs'), '--syn-comment', '#838183',
+		'font-style: italic'),
+	(('cp', 'cpf'), '--syn-preproc', '#008200', None),
+	(('m', 'mb', 'mf', 'mh', 'mi', 'mo', 'il'), '--syn-number', '#b07e00',
+		None),
+	(('o', 'ow', 'p'), '--syn-operator', '#000', None),
+	(('err',), '--syn-error', '#bf0303', None),
+	(('gd',), '--red', 'red', None),
+	(('gi',), '--green', 'green', None),
+	(('lineno', 'linenos'), '--syn-linenum', '#555', None),
+)
+
+
+def style_defs(prefix='.highlight'):
+	rules = []
+	for classes, prop, fallback, extra in SYNTAX_COLORS:
+		selector = ', '.join('%s .%s' % (prefix, c) for c in classes)
+		decls = 'color: var(%s, %s)' % (prop, fallback)
+		if extra:
+			decls += '; ' + extra
+		rules.append('%s { %s }' % (selector, decls))
+	rules.append('%s .hll { background-color: var(--syn-mark-bg, #ffb) }'
+		% prefix)
+	return '\n'.join(rules) + '\n'
+
+
 sys.stdin = io.TextIOWrapper(sys.stdin.buffer, encoding='utf-8', errors='replace')
 sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8', errors='replace')
 data = sys.stdin.read()
 filename = sys.argv[1]
-formatter = HtmlFormatter(style='pastie', nobackground=True)
+formatter = HtmlFormatter(nobackground=True)
 
 try:
 	lexer = guess_lexer_for_filename(filename, data)
@@ -48,8 +87,8 @@ except TypeError:
 	lexer = TextLexer()
 
 # highlight! :-)
-# printout pygments' css definitions as well
+# printout the css definitions for pygments' token classes as well
 sys.stdout.write('<style>')
-sys.stdout.write(formatter.get_style_defs('.highlight'))
+sys.stdout.write(style_defs('.highlight'))
 sys.stdout.write('</style>')
 sys.stdout.write(highlight(data, lexer, formatter, outfile=None))
diff --git a/filters/syntax-highlighting.sh b/filters/syntax-highlighting.sh
index 840bc34..bb8d60c 100755
--- a/filters/syntax-highlighting.sh
+++ b/filters/syntax-highlighting.sh
@@ -8,8 +8,10 @@
 # might have to use an external call to sed instead.
 #
 # Note: the highlight command (http://www.andre-simon.de/) uses css for syntax
-# highlighting, so you'll probably want something like the following included
-# in your css file:
+# highlighting. cgit.css defines these classes in terms of its --syn-* custom
+# properties, so nothing has to be added when using the default stylesheet.
+# The palette below, from highlight 3.13, is what those properties default to;
+# a custom stylesheet wanting the same colors can use it directly:
 #
 # Style definition file generated by highlight 2.4.8, http://www.andre-simon.de/
 #
@@ -114,8 +116,12 @@ EXTENSION="${BASENAME##*.}"
 # Version 2 can be found (for example) on EPEL 5, while version 3 can be
 # found (for example) on EPEL 6.
 #
+# Note that -I (--include-style) is not used: the stylesheet it embeds in the
+# output would override the .hl rules in cgit.css and with them any theming
+# done through the --syn-* custom properties.
+#
 # This is for version 2
-exec highlight --force -f -I -X -S "$EXTENSION" 2>/dev/null
+exec highlight --force -f -X -S "$EXTENSION" 2>/dev/null
 
 # This is for version 3
-#exec highlight --force -f -I -O xhtml -S "$EXTENSION" 2>/dev/null
+#exec highlight --force -f -O xhtml -S "$EXTENSION" 2>/dev/null