edited cgit dark theme

1 files changed, 142 insertions, 76 deletions

diff --git a/cgit.css b/cgit.css
index eb4dc13..71a2987 100644
--- a/cgit.css
+++ b/cgit.css
@@ -1,24 +1,91 @@
+:root {
+	--bg1: #dfdfdf;
+	--bg2: #fff;
+	--bg3: #afafaf;
+
+	--fg1: #232627;
+	--fg2: #232627;
+	--fg3: #2ed19b;
+	--fg-disabled: lightgray;
+
+	--accent1: #BF87D0;
+	--accent1rgb: rgb(191, 135, 208);
+	--accent1rgba7: rgba(191, 135, 208, 0.7);
+	--accent1rgba9: rgba(191, 135, 208, 0.9);
+
+	--red1: red;
+	--red2: #c00;
+	--red3: #a00;
+	--red4: #c55;
+
+	--green1: green;
+	--green2: #5c5;
+	--green3: #0a0;
+	--green4: #080;
+
+	--yellow1: #aa0;
+
+	--magenta1: #a0a;
+
+	--blue1: #00a;
+	--blue2: #009;
+
+	--cyan1: #0aa;
+
+	--gray1: #777;
+	--gray2: gray;
+	--gray3: #888;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+	    --bg1: #232627;
+	    --bg2: #161020;
+	    --bg3: #151515;
+
+	    --fg1: white;
+	    --fg2: #232627;
+	    --fg3: #2ed19b;
+	    --fg-disabled: lightgray;
+
+	    --accent1: #BF87D0;
+	    --accent1rgb: rgb(191, 135, 208);
+	    --accent1rgba7: rgba(191, 135, 208, 0.7);
+	    --accent1rgba9: rgba(191, 135, 208, 0.9);
+
+	    --red1: #e25b5b;
+	    --green1: #46a446;
+	    --blue2: #6957f3;
+    }
+}
+
+.ctrl select {
+	background-color: var(--bg1);
+	color: var(--fg1);
+	border: 1px solid var(--accent1);
+}
+
 div#cgit {
 	padding: 0em;
 	margin: 0em;
 	font-family: sans-serif;
 	font-size: 10pt;
-	color: white;
-	background: #232627;
+	color: var(--fg1);
+	background: var(--bg1);
 	padding: 4px;
 }
 
 table.list tbody tr.nohover th a {
-	color: blue;
+	color: var(--fg-disabled);
 }
 
 body {
-	background-color: #161020;
-	color: white;
+	background-color: var(--bg2);
+	color: var(--fg1);
 }
 
 div#cgit a {
-	color: #2ed19b;
+	color: var(--fg3);
 	text-decoration: none;
 }
 
@@ -47,7 +114,7 @@ div#cgit table#header td.main {
 }
 
 div#cgit table#header td.main a {
-	color: white;
+	color: var(--fg1);
 }
 
 div#cgit table#header td.form {
@@ -61,24 +128,24 @@ div#cgit table#header td.form {
 div#cgit table#header td.form form,
 div#cgit table#header td.form input,
 div#cgit table#header td.form select {
-	background-color: #232627;
-	color: white;
+	background-color: var(--bg1);
+	color: var(--fg1);
 }
 
 div#cgit table#header td.form input,
 div#cgit table#header td.form select {
-	border: 1px solid #bf87d0;
+	border: 1px solid var(--accent1);
 	padding: 0.2rem 0.8rem;
 }
 
 div#cgit table#header td.sub {
-	color: white;
+	color: var(--fg1);
 	padding-left: 10px;
 	padding-top: 1rem;
 }
 
 div#cgit table.tabs {
-	border-bottom: solid 3px #bf87d0;
+	border-bottom: solid 3px var(--accent1);
 	border-collapse: collapse;
 	margin-top: 2em;
 	margin-bottom: 0px;
@@ -92,13 +159,13 @@ div#cgit table.tabs td {
 
 div#cgit table.tabs td a {
 	padding: 2px 0.75em;
-	color: white;
+	color: var(--fg1);
 	font-size: 110%;
 }
 
 div#cgit table.tabs td a.active {
-	color: #232627;
-	background-color: #bf87d0;
+	color: var(--fg2);
+	background-color: var(--accent1);
 }
 
 div#cgit table.tabs a[href^="http://"]:after, div#cgit table.tabs a[href^="https://"]:after {
@@ -120,22 +187,22 @@ div#cgit table.tabs td.form form {
 div#cgit table.tabs td.form input,
 div#cgit table.tabs td.form select {
 	padding: 0.2rem 0.8rem;
-	background-color: #232627;
-	color: white;
-	border: 1px solid #bf87d0;
+	background-color: var(--bg1);
+	color: var(--fg1);
+	border: 1px solid var(--accent1);
 }
 
 div#cgit div.path {
 	margin: 0px;
 	padding: 5px 2em 2px 2em;
-	color: white;
-	background-color: #232627;
+	color: var(--fg1);
+	background-color: var(--bg1);
 }
 
 div#cgit div.content {
 	margin: 0px;
 	padding: 2em;
-	border-bottom: solid 3px #bf87d0;
+	border-bottom: solid 3px var(--accent1);
 }
 
 
@@ -146,48 +213,48 @@ div#cgit table.list {
 }
 
 div#cgit table.list tr {
-	background-color: #232627;
+	background-color: var(--bg1);
 }
 
 div#cgit table.list tr.logheader {
-	background: #232627;
+	background: var(--bg1);
 }
 
 div#cgit table.list tr:nth-child(even) {
-	background: #151515;
+	background: var(--bg3);
 }
 
 div#cgit table.list tr:nth-child(odd) {
-	background: #232627;
+	background: var(--bg1);
 }
 
 div#cgit table.list tr:hover {
-    background-color: rgba(191, 135, 208, 0.7);
+    background-color: var(--accent1rgba7);
 }
 
 div#cgit table.list tr:hover td a {
-	color: white;
+	color: var(--fg1);
 }
 
 div#cgit table.list tr.nohover {
-    background-color: rgba(191, 135, 208, 0.9);
-	color: #232627;
+    background-color: var(--accent1rgba9);
+	color: var(--bg1);
 }
 
 div#cgit table.list tr.nohover a {
-	color: #161020;
+	color: var(--bg2);
 }
 
 div#cgit table.list tr.nohover:hover {
-    background-color: rgb(191, 135, 208);
+    background-color: var(--accent1rgb);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
-    background-color: rgba(191, 135, 208, 0.9);
+    background-color: var(--accent1rgba9);
 }
 
 div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
-    background-color: rgba(191, 135, 208, 0.7);
+    background-color: var(--accent1rgba7);
 }
 
 div#cgit table.list th {
@@ -207,27 +274,27 @@ div#cgit table.list td.commitgraph {
 }
 
 div#cgit table.list td.commitgraph .column1 {
-	color: #a00;
+	color: var(--red3);
 }
 
 div#cgit table.list td.commitgraph .column2 {
-	color: #0a0;
+	color: var(--green3);
 }
 
 div#cgit table.list td.commitgraph .column3 {
-	color: #aa0;
+	color: var(--yellow1);
 }
 
 div#cgit table.list td.commitgraph .column4 {
-	color: #00a;
+	color: var(--blue1);
 }
 
 div#cgit table.list td.commitgraph .column5 {
-	color: #a0a;
+	color: var(--magenta1);
 }
 
 div#cgit table.list td.commitgraph .column6 {
-	color: #0aa;
+	color: var(--cyan1);
 }
 
 div#cgit table.list td.logsubject {
@@ -242,16 +309,16 @@ div#cgit table.list td.logmsg {
 }
 
 div#cgit table.list td a {
-	color: white;
+	color: var(--fg1);
 }
 
 div#cgit table.list td a.ls-dir {
 	font-weight: bold;
-	color: #bf87d0;
+	color: var(--accent1);
 }
 
 div#cgit table.list td a:hover {
-	color: white;
+	color: var(--fg1);
 }
 
 div#cgit img {
@@ -285,13 +352,13 @@ div#cgit div#summary {
 div#cgit table#downloads {
 	float: right;
 	border-collapse: collapse;
-	border: solid 1px #777;
+	border: solid 1px var(--gray1);
 	margin-left: 0.5em;
 	margin-bottom: 0.5em;
 }
 
 div#cgit table#downloads th {
-	background-color: #232627;
+	background-color: var(--bg1);
 }
 
 div#cgit div#blob {
@@ -299,7 +366,7 @@ div#cgit div#blob {
 }
 
 div#cgit div.error {
-	color: red;
+	color: var(--red1);
 	font-weight: bold;
 	margin: 1em 2em;
 }
@@ -328,14 +395,14 @@ div#cgit table.blob td.hashes,
 div#cgit table.blob td.lines {
 	margin: 0; padding: 0 0 0 0.5em;
 	vertical-align: top;
-	color: white;
+	color: var(--fg1);
 }
 
 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(--gray2);
 }
 
 div#cgit table.blob pre {
@@ -344,14 +411,14 @@ div#cgit table.blob pre {
 
 div#cgit table.blob td.linenumbers a,
 div#cgit table.ssdiff td.lineno a {
-	color: gray;
+	color: var(--gray2);
 	text-align: right;
 	text-decoration: none;
 }
 
 div#cgit table.blob td.linenumbers a:hover,
 div#cgit table.ssdiff td.lineno a:hover {
-	color: white;
+	color: var(--fg1);
 }
 
 div#cgit table.blame td.hashes,
@@ -370,11 +437,11 @@ div#cgit table.blame td.linenumbers div.alt {
 }
 
 div#cgit table.blame div.alt:nth-child(even) {
-	background: #151515;
+	background: var(--bg3);
 }
 
 div#cgit table.blame div.alt:nth-child(odd) {
-	background: #232627;
+	background: var(--bg1);
 }
 
 div#cgit table.blame td.lines > div {
@@ -395,14 +462,14 @@ div#cgit table.bin-blob {
 div#cgit table.bin-blob th {
 	font-family: monospace;
 	white-space: pre;
-	border: solid 1px #777;
+	border: solid 1px var(--gray1);
 	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(--gray1);
 	padding: 0em 1em;
 }
 
@@ -422,8 +489,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(--accent1);
+	background-color: var(--bg1);
 }
 
 div#cgit div.cgit-panel th {
@@ -491,8 +558,8 @@ div#cgit div.diffstat-header {
 
 div#cgit table.diffstat {
 	border-collapse: collapse;
-	border: solid 1px #aaa;
-	background-color: #eee;
+	border: solid 1px var(--accent1);
+	background-color: var(--bg1);
 }
 
 div#cgit table.diffstat th {
@@ -515,19 +582,19 @@ div#cgit table.diffstat td.mode {
 
 div#cgit table.diffstat td span.modechange {
 	padding-left: 1em;
-	color: red;
+	color: var(--red1);
 }
 
 div#cgit table.diffstat td.add a {
-	color: green;
+	color: var(--green1);
 }
 
 div#cgit table.diffstat td.del a {
-	color: red;
+	color: var(--red1);
 }
 
 div#cgit table.diffstat td.upd a {
-	color: blue;
+	color: var(--fg-disabled);
 }
 
 div#cgit table.diffstat td.graph {
@@ -546,15 +613,15 @@ div#cgit table.diffstat td.graph td {
 }
 
 div#cgit table.diffstat td.graph td.add {
-	background-color: #5c5;
+	background-color: var(--green2);
 }
 
 div#cgit table.diffstat td.graph td.rem {
-	background-color: #c55;
+	background-color: var(--red4);
 }
 
 div#cgit div.diffstat-summary {
-	color: #888;
+	color: var(--gray3);
 	padding-top: 0.5em;
 }
 
@@ -574,15 +641,15 @@ div#cgit table.diff td div.head {
 }
 
 div#cgit table.diff td div.hunk {
-	color: #009;
+	color: var(--blue2);
 }
 
 div#cgit table.diff td div.add {
-	color: green;
+	color: var(--green1);
 }
 
 div#cgit table.diff td div.del {
-	color: red;
+	color: var(--red1);
 }
 
 div#cgit .sha1 {
@@ -600,7 +667,7 @@ div#cgit .right {
 
 div#cgit table.list td.reposection {
 	font-style: italic;
-	color: #888;
+	color: var(--gray3);
 }
 
 div#cgit a.button {
@@ -637,7 +704,7 @@ div#cgit ul.pager li {
 }
 
 div#cgit ul.pager a {
-	color: #777;
+	color: var(--gray1);
 }
 
 div#cgit ul.pager .current {
@@ -646,11 +713,11 @@ div#cgit ul.pager .current {
 
 div#cgit span.age-mins {
 	font-weight: bold;
-	color: #080;
+	color: var(--green4);
 }
 
 div#cgit span.age-hours {
-	color: #080;
+	color: var(--green4);
 }
 
 div#cgit span.age-days {
@@ -662,7 +729,7 @@ div#cgit span.age-weeks {
 }
 
 div#cgit span.age-months {
-	color: #888;
+	color: var(--gray3);
 }
 
 div#cgit span.age-years {
@@ -670,7 +737,7 @@ div#cgit span.age-years {
 }
 
 div#cgit span.insertions {
-	color: #080;
+	color: var(--green4);
 }
 
 div#cgit span.deletions {
@@ -765,7 +832,7 @@ div#cgit table.stats td.total {
 }
 
 div#cgit table.stats td.sum {
-	color: #c00;
+	color: var(--red2);
 	font-weight: bold;
 /*	background-color: #eee; */
 }
@@ -783,7 +850,7 @@ div#cgit table.vgraph {
 div#cgit table.vgraph th {
 	background-color: #eee;
 	font-weight: bold;
-	border: solid 1px white;
+	border: solid 1px var(--fg1);
 	padding: 1px 0.5em;
 }
 
@@ -933,4 +1000,3 @@ div#cgit table.blob .kwa { color:#000000; font-weight:bold; }
 div#cgit table.blob .kwb { color:#0057ae; }
 div#cgit table.blob .kwc { color:#000000; font-weight:bold; }
 div#cgit table.blob .kwd { color:#010181; }
-