cgit

diff --git a/cgit.css b/cgit.css
index dfa144d05dd5757b0a4b64225a9e4c27d8ac1223..06510974aaf3e7cc09cc15824d552be94d2bf50b 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,15 +1,113 @@
+:root {
+	--font-size: 10pt;
+
+	--bg: white;
+	--text: black;
+	--inactive-text: grey;
+	--accent-color: blue;
+	--hover-bg: #eee;
+	--border: #aaa;
+	--table-bg1: #f7f7f7;
+	--table-bg2: #fff;
+	--highlight-bg: lightgrey;
+
+	--age-mins: #080;
+	--age-hours: #080;
+	--age-days: #040;
+	--age-weeks: #444;
+	--age-months: #8886;
+	--age-years: #bbb;
+
+	--branch-deco: #88ff88;
+	--tag-deco: #ffff88;
+	--annotated-tag-deco: #ffcc88;
+	--remote-deco: #ccccff;
+	--deco: #ff8888;
+
+	--diff-add: green;
+	--diff-rem: red;
+	--diff-hunk: blue;
+	--diff-add-bg: #cfc;
+	--diff-add-bg-dark: #aca;
+	--diff-rem-bg: #fcc;
+	--diff-rem-bg-dark: #caa;
+	--diff-changed-bg: #ffc;
+	--diff-changed-bg-dark: #cca;
+	--diff-hunk-bg: #ccf;
+
+	--vgraph-col1: #a00;
+	--vgraph-col2: #0a0;
+	--vgraph-col3: #aa0;
+	--vgraph-col4: #00a;
+	--vgraph-col5: #a0a;
+	--vgraph-col6: #0aa;
+
+	--stats-sum: #c00;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: black;
+		--text: white;
+		--inactive-text: grey;
+		--accent-color: green;
+		--hover-bg: #444;
+		--border: #aaa;
+		--table-bg1: #000;
+		--table-bg2: #111;
+		--highlight-bg: #333;
+
+		--age-mins: #080;
+		--age-hours: #080;
+		--age-days: #040;
+		--age-weeks: #444;
+		--age-months: #8886;
+		--age-years: #bbb;
+
+		--branch-deco: #080;
+		--tag-deco: #880;
+		--annotated-tag-deco: #860;
+		--remote-deco: #008;
+		--deco: #800;
+
+		--diff-add: green;
+		--diff-rem: red;
+		--diff-hunk: blue;
+		--diff-add-bg: #363;
+		--diff-add-bg-dark: #141;
+		--diff-rem-bg: #a22;
+		--diff-rem-bg-dark: #711;
+		--diff-changed-bg: #886;
+		--diff-changed-bg-dark: #664;
+		--diff-hunk-bg: #33a;
+
+		--vgraph-col1: #a00;
+		--vgraph-col2: #0a0;
+		--vgraph-col3: #aa0;
+		--vgraph-col4: #00a;
+		--vgraph-col5: #a0a;
+		--vgraph-col6: #0aa;
+
+		--stats-sum: #c00;
+	}
+}
+
+body{
+	background: var(--bg);
+}
+
 div#cgit {
 	padding: 0em;
 	margin: 0em;
 	font-family: sans-serif;
-	font-size: 10pt;
-	color: #333;
-	background: white;
+	font-size: var(--font-size);
+	color: var(--text);
+	background: var(--bg);
 	padding: 4px;
 }
 
 div#cgit a {
-	color: blue;
+	color: var(--accent-color);
 	text-decoration: none;
 }
 
@@ -38,7 +136,7 @@ 	white-space: nowrap;
 }
 
 div#cgit table#header td.main a {
-	color: #000;
+	color: var(--text);
 }
 
 div#cgit table#header td.form {
@@ -56,13 +154,13 @@ 	font-size: 90%;
 }
 
 div#cgit table#header td.sub {
-	color: #777;
-	border-top: solid 1px #ccc;
+	color: var(--inactive-text);
+	border-top: solid 1px var(--highlight-bg);
 	padding-left: 10px;
 }
 
 div#cgit table.tabs {
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px var(--highlight-bg);
 	border-collapse: collapse;
 	margin-top: 2em;
 	margin-bottom: 0px;
@@ -76,13 +174,13 @@ }
 
 div#cgit table.tabs td a {
 	padding: 2px 0.75em;
-	color: #777;
+	color: var(--inactive-text);
 	font-size: 110%;
 }
 
 div#cgit table.tabs td a.active {
-	color: #000;
-	background-color: #ccc;
+	color: var(--text);
+	background-color: var(--highlight-bg);
 }
 
 div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
@@ -109,14 +207,14 @@
 div#cgit div.path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
-	color: #000;
-	background-color: #eee;
+	color: var(--text);
+	background-color: var(--highlight-bg);
 }
 
 div#cgit div.content {
 	margin: 0px;
 	padding: 2em;
-	border-bottom: solid 3px #ccc;
+	border-bottom: solid 3px var(--highlight-bg);
 }
 
 
@@ -127,39 +225,39 @@ 	border-collapse: collapse;
 }
 
 div#cgit table.list tr {
-	background: white;
+	background: white; /*TODO*/
 }
 
 div#cgit table.list tr.logheader {
-	background: #eee;
+	background: #eee;/*TODO*/
 }
 
 div#cgit table.list tr:nth-child(even) {
-	background: #f7f7f7;
+	background: var(--table-bg1);
 }
 
 div#cgit table.list tr:nth-child(odd) {
-	background: white;
+	background: var(--table-bg2);
 }
 
 div#cgit table.list tr:hover {
-	background: #eee;
+	background: var(--hover-bg);
 }
 
 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(--table-bg1);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
-	background: white;
+	background: var(--table-bg2);
 }
 
 div#cgit table.list th {
@@ -183,27 +281,27 @@ 	white-space: pre;
 }
 
 div#cgit table.list td.commitgraph .column1 {
-	color: #a00;
+	color: var(--vgraph-col1);
 }
 
 div#cgit table.list td.commitgraph .column2 {
-	color: #0a0;
+	color: var(--vgraph-col2);
 }
 
 div#cgit table.list td.commitgraph .column3 {
-	color: #aa0;
+	color: var(--vgraph-col3);
 }
 
 div#cgit table.list td.commitgraph .column4 {
-	color: #00a;
+	color: var(--vgraph-col4);
 }
 
 div#cgit table.list td.commitgraph .column5 {
-	color: #a0a;
+	color: var(--vgraph-col5);
 }
 
 div#cgit table.list td.commitgraph .column6 {
-	color: #0aa;
+	color: var(--vgraph-col6);
 }
 
 div#cgit table.list td.logsubject {
@@ -218,16 +316,16 @@ 	padding: 0 0.5em;
 }
 
 div#cgit table.list td a {
-	color: black;
+	color: var(--text);
 }
 
 div#cgit table.list td a.ls-dir {
 	font-weight: bold;
-	color: #00f;
+	color: var(--accent-color);
 }
 
 div#cgit table.list td a:hover {
-	color: #00f;
+	color: var(--accent-color);
 }
 
 div#cgit img {
@@ -258,7 +356,7 @@ 	vertical-align: top;
 	margin-bottom: 1em;
 }
 
-div#cgit table#downloads {
+div#cgit table#downloads { /*TODO*/
 	float: right;
 	border-collapse: collapse;
 	border: solid 1px #777;
@@ -297,21 +395,21 @@ }
 
 div#cgit table.blob {
 	margin-top: 0.5em;
-	border-top: solid 1px black;
+	border-top: solid 1px var(--border);
 }
 
 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(--text);
 }
 
 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(--border);
 }
 
 div#cgit table.blob pre {
@@ -320,14 +418,14 @@ }
 
 div#cgit table.blob td.linenumbers a,
 div#cgit table.ssdiff td.lineno a {
-	color: gray;
+	color: var(--inactive-text);
 	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(--text);
 }
 
 div#cgit table.blame td.hashes,
@@ -346,11 +444,11 @@ 	padding: 0 0.5em 0 0;
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #eee;
+	background: var(--table-bg1);
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: white;
+	background: var(--table-bg2);
 }
 
 div#cgit table.blame td.lines > div {
@@ -365,20 +463,20 @@ }
 
 div#cgit table.bin-blob {
 	margin-top: 0.5em;
-	border: solid 1px black;
+	border: solid 1px var(--border);
 }
 
 div#cgit table.bin-blob th {
 	font-family: monospace;
 	white-space: pre;
-	border: solid 1px #777;
+	border: solid 1px var(--border);
 	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);
 	padding: 0em 1em;
 }
 
@@ -397,9 +495,7 @@ 	margin-top: 1.5em;
 }
 
 div#cgit div.cgit-panel table {
-	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
+	background-color: var(--highlight-bg);
 }
 
 div#cgit div.cgit-panel th {
@@ -447,7 +543,7 @@ 	font-weight: bold;
 	padding-top: 1.5em;
 }
 
-div#cgit div.notes {
+div#cgit div.notes { /*TODO*/
 	white-space: pre;
 	font-family: monospace;
 	border: solid 1px #ee9;
@@ -467,8 +563,7 @@ }
 
 div#cgit table.diffstat {
 	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
+	background-color: var(--highlight-bg);
 }
 
 div#cgit table.diffstat th {
@@ -491,19 +586,19 @@ }
 
 div#cgit table.diffstat td span.modechange {
 	padding-left: 1em;
-	color: red;
+	color: var(--diff-rem);;
 }
 
 div#cgit table.diffstat td.add a {
-	color: green;
+	color: var(--diff-add);
 }
 
 div#cgit table.diffstat td.del a {
-	color: red;
+	color: var(--diff-rem);
 }
 
 div#cgit table.diffstat td.upd a {
-	color: blue;
+	color: var(--accent-color);
 }
 
 div#cgit table.diffstat td.graph {
@@ -522,15 +617,15 @@ 	height: 7pt;
 }
 
 div#cgit table.diffstat td.graph td.add {
-	background-color: #5c5;
+	background-color: var(--diff-add);
 }
 
 div#cgit table.diffstat td.graph td.rem {
-	background-color: #c55;
+	background-color: var(--diff-rem);
 }
 
 div#cgit div.diffstat-summary {
-	color: #888;
+	color: var(--inactive-text);
 	padding-top: 0.5em;
 }
 
@@ -546,22 +641,22 @@
 div#cgit table.diff td div.head {
 	font-weight: bold;
 	margin-top: 1em;
-	color: black;
+	color: var(--text);
 }
 
 div#cgit table.diff td div.hunk {
-	color: #009;
+	color: var(--diff-hunk);
 }
 
 div#cgit table.diff td div.add {
-	color: green;
+	color: var(--diff-add);
 }
 
 div#cgit table.diff td div.del {
-	color: red;
+	color: var(--diff-rem);
 }
 
-div#cgit .oid {
+div#cgit .sha1 {
 	font-family: monospace;
 	font-size: 90%;
 }
@@ -576,7 +671,7 @@ }
 
 div#cgit table.list td.reposection {
 	font-style: italic;
-	color: #888;
+	color: var(--inactive-text);
 }
 
 div#cgit a.button {
@@ -612,7 +707,7 @@ 	display: inline-block;
 	margin: 0.25em 0.5em;
 }
 
-div#cgit ul.pager a {
+div#cgit ul.pager a { /*TODO*/
 	color: #777;
 }
 
@@ -622,46 +717,46 @@ }
 
 div#cgit span.age-mins {
 	font-weight: bold;
-	color: #080;
+	color: var(--age-mins);
 }
 
 div#cgit span.age-hours {
-	color: #080;
+	color: var(--age-hours);
 }
 
 div#cgit span.age-days {
-	color: #040;
+	color: var(--age-days);
 }
 
 div#cgit span.age-weeks {
-	color: #444;
+	color: var(--age-weeks);
 }
 
 div#cgit span.age-months {
-	color: #888;
+	color: var(--age-months);
 }
 
 div#cgit span.age-years {
-	color: #bbb;
+	color: var(--age-years);
 }
 
 div#cgit span.insertions {
-	color: #080;
+	color: var(--diff-add);
 }
 
 div#cgit span.deletions {
-	color: #800;
+	color: var(--diff-rem);
 }
 
 div#cgit div.footer {
 	margin-top: 0.5em;
 	text-align: center;
 	font-size: 80%;
-	color: #ccc;
+	color: var(--inactive-text);
 }
 
 div#cgit div.footer a {
-	color: #ccc;
+	color: var(--inactive-text);
 	text-decoration: none;
 }
 
@@ -670,43 +765,43 @@ 	text-decoration: underline;
 }
 
 div#cgit a.branch-deco {
-	color: #000;
+	color: var(--text);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #88ff88;
-	border: solid 1px #007700;
+	background-color: var(--branch-deco);
+	border: solid 1px var(--text);
 }
 
 div#cgit a.tag-deco {
-	color: #000;
+	color: var(--text);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffff88;
-	border: solid 1px #777700;
+	background-color: var(--tag-deco);
+	border: solid 1px var(--text);
 }
 
 div#cgit a.tag-annotated-deco {
-	color: #000;
+	color: var(--text);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ffcc88;
-	border: solid 1px #777700;
+	background-color: var(--annotated-tag-deco);
+	border: solid 1px var(--text);
 }
 
 div#cgit a.remote-deco {
-	color: #000;
+	color: var(--text);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ccccff;
-	border: solid 1px #000077;
+	background-color: var(--remote-deco);
+	border: solid 1px var(--text);
 }
 
 div#cgit a.deco {
-	color: #000;
+	color: var(--text);
 	margin: 0px 0.5em;
 	padding: 0px 0.25em;
-	background-color: #ff8888;
-	border: solid 1px #770000;
+	background-color: var(--deco);
+	border: solid 1px var(--text);
 }
 
 div#cgit div.commit-subject a.branch-deco,
@@ -719,21 +814,21 @@ 	font-size: 75%;
 }
 
 div#cgit table.stats {
-	border: solid 1px black;
+	border: solid 1px var(--border);
 	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(--highlight-bg);
+	border: solid 1px var(--border);
 }
 
 div#cgit table.stats td {
 	text-align: right;
 	padding: 1px 0.5em;
-	border: solid 1px black;
+	border: solid 1px var(--border);
 }
 
 div#cgit table.stats td.total {
@@ -742,7 +837,7 @@ 	text-align: left;
 }
 
 div#cgit table.stats td.sum {
-	color: #c00;
+	color: var(--stats-sum);
 	font-weight: bold;
 /*	background-color: #eee; */
 }
@@ -769,16 +864,16 @@ 	vertical-align: bottom;
 	padding: 0px 10px;
 }
 
-div#cgit table.vgraph div.bar {
+div#cgit table.vgraph div.bar { /* TODO */
 	background-color: #eee;
 }
 
-div#cgit table.hgraph {
+div#cgit table.hgraph { /* TODO */
 	border: solid 1px black;
 	width: 800px;
 }
 
-div#cgit table.hgraph th {
+div#cgit table.hgraph th { /* TODO */
 	background-color: #eee;
 	font-weight: bold;
 	border: solid 1px black;
@@ -790,7 +885,7 @@ 	vertical-align: middle;
 	padding: 2px 2px;
 }
 
-div#cgit table.hgraph div.bar {
+div#cgit table.hgraph div.bar { /* TODO */
 	background-color: #eee;
 	height: 1em;
 }
@@ -804,83 +899,83 @@ 	font-size: 75%;
 	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);
+	border-right: solid 1px var(--border);;
 }
 
 div#cgit table.ssdiff td.add {
-	color: black;
-	background: #cfc;
+	color: var(--text);
+	background: var(--diff-add-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.add_dark {
-	color: black;
-	background: #aca;
+	color: var(--text);
+	background: var(--diff-add-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.add {
-	background: #cfc;
+	background: var(--diff-add-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.del {
-	color: black;
-	background: #fcc;
+	color: var(--text);
+	background: var(--diff-rem-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.del_dark {
-	color: black;
-	background: #caa;
+	color: var(--text);
+	background: var(--diff-rem-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff span.del {
-	background: #fcc;
+	background: var(--diff-rem-bg);
 	font-weight: bold;
 }
 
 div#cgit table.ssdiff td.changed {
-	color: black;
-	background: #ffc;
+	color: var(--text);
+	background: var(--diff-changed-bg);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.changed_dark {
-	color: black;
-	background: #cca;
+	color: var(--text);
+	background: var(--diff-changed-bg-dark);
 	min-width: 50%;
 }
 
 div#cgit table.ssdiff td.lineno {
-	color: black;
-	background: #eee;
+	color: var(--text);
+	background: var(--hover-bg);
 	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(--text);
+	background: var(--diff-hunk-bg);
+	border-top: solid 1px var(--border);
+	border-bottom: solid 1px var(--border);
 }
 
 div#cgit table.ssdiff td.head {
-	border-top: solid 1px #aaa;
-	border-bottom: solid 1px #aaa;
+	border-top: solid 1px var(--border);
+	border-bottom: solid 1px var(--border);
 }
 
 div#cgit table.ssdiff td.head div.head {
 	font-weight: bold;
-	color: black;
+	color: var(--text);
 }
 
 div#cgit table.ssdiff td.foot {
-	border-top: solid 1px #aaa;
+	border-top: solid 1px var(--border);
 	border-left: none;
 	border-right: none;
 	border-bottom: none;