css: Add dark mode styling

1 files changed, 329 insertions, 0 deletions

diff --git a/cgit.css b/cgit.css
index f288e1a..219d70d 100644
--- a/cgit.css
+++ b/cgit.css
@@ -913,6 +913,41 @@ div#cgit table.ssdiff td.space div {
 :root {
 	--td-padding-y: 0.3em;
 	--th-padding-y: calc(2 * var(--td-padding-y));
+
+	--dk-black: #222;
+	--dk-light-black: #333;
+	--dk-darkest-gray: #444;
+	--dk-darker-gray: #666;
+	--dk-dark-gray: #999;
+	--dk-gray: #aaa;
+	--dk-white: #ccc;
+
+	/* HSV(*, 45, 80) */
+	--dk-red: #cc7070;		/* Hue: 0 */
+	--dk-orange: #cc9e70;		/* Hue: 30 */
+	--dk-yellow: #cccc70;		/* Hue: 60 */
+	--dk-green: #77cc70;		/* Hue: 115 */
+	--dk-teal: #70ccad;		/* Hue: 160 */
+	--dk-blue: #70a5cc;		/* Hue: 205 */
+	--dk-purple: #7077cc;		/* Hue: 235 */
+
+	/* HSV(*, 45, 70) */
+	--dk-dark-red: #b26262;		/* Hue: 0 */
+	--dk-dark-orange: #b28a62;	/* Hue: 30 */
+	--dk-dark-yellow: #b2b262;	/* Hue: 60 */
+	--dk-dark-green: #68b262;	/* Hue: 115 */
+	--dk-dark-teal: #62b297;	/* Hue: 160 */
+	--dk-dark-blue: #6291b2;	/* Hue: 205 */
+	--dk-dark-purple: #6268b2;	/* Hue: 235 */
+
+	/* HSV(*, 45, 90) */
+	--dk-light-red: #e57e7e;	/* Hue: 0 */
+	--dk-light-orange: #e5b17e;	/* Hue: 30 */
+	--dk-light-yellow: #e5e57e;	/* Hue: 60 */
+	--dk-light-green: #86e57e;	/* Hue: 115 */
+	--dk-light-teal: #7ee5c3;	/* Hue: 160 */
+	--dk-light-blue: #7ebae5;	/* Hue: 205 */
+	--dk-light-purple: #7e86e5;	/* Hue: 235 */
 }
 
 div#cgit {
@@ -944,3 +979,297 @@ div#cgit table.list td {
 div#cgit a.button {
 	font-size: 100%;
 }
+
+@media(prefers-color-scheme: dark) {
+	body {
+		background: var(--dk-black);
+	}
+
+	div#cgit {
+		color: var(--dk-white);
+		background: var(--bg-black);
+	}
+
+	div#cgit table#header td.sub {
+		color: var(--dk-gray);
+		border-top-color: var(--dk-dark-gray);
+	}
+
+	div#cgit table.list tr {
+		background: var(--dk-black);
+	}
+
+	div#cgit table.list tr.logheader {
+		background: #eee;
+	}
+
+	div#cgit table.list tr:nth-child(even) {
+		background: var(--dk-light-black);
+	}
+
+	div#cgit table.list tr:nth-child(odd) {
+		background: var(--dark-black);
+	}
+
+	div#cgit table.list tr:hover {
+		background: var(--dk-darkest-gray);
+	}
+
+	div#cgit table.list tr.nohover {
+		background: var(--dark-black);
+	}
+
+	div#cgit table.list tr.nohover:hover {
+		background: var(--dark-black);
+	}
+
+	div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
+		background: var(--dk-light-black);
+	}
+
+	div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
+		background: var(--dark-black);
+	}
+
+	div#cgit table.list td a {
+		color: var(--dk-white);
+	}
+
+	div#cgit span.age-mins {
+		color: var(--dk-dark-green);
+	}
+
+	div#cgit span.age-hours {
+		color: var(--dk-dark-green);
+	}
+
+	div#cgit span.age-days {
+		color: var(--dk-gray);
+	}
+
+	div#cgit span.age-weeks {
+		color: #ccc;
+	}
+
+	div#cgit span.age-months {
+		color: #bbb;
+	}
+
+	div#cgit span.age-years {
+		color: #aaa;
+	}
+
+	div#cgit table.list td.reposection {
+		color: #aaa;
+	}
+
+	div#cgit a {
+		color: var(--dk-blue);
+	}
+
+	div#cgit table.diffstat td.upd a {
+		color: var(--dk-blue);
+	}
+
+	div#cgit table.list td a.ls-dir {
+		color: var(--dk-blue);
+	}
+
+	div#cgit table.list td a:hover {
+		color: var(--dk-blue);
+	}
+
+	div#cgit table.tabs {
+		border-bottom-color: var(--dk-dark-gray);
+	}
+
+	div#cgit table.tabs td a {
+		color: var(--dk-gray);
+	}
+
+	div#cgit table.tabs td a.active {
+		color: var(--dk-black);
+		background-color: var(--dk-dark-gray);
+	}
+
+	div#cgit div.content {
+		border-bottom-color: var(--dk-dark-gray);
+	}
+
+	div#cgit table#header td.main a {
+		color: var(--dk-white);
+	}
+
+	div#cgit span.insertions {
+		color: var(--dk-green);
+	}
+
+	div#cgit span.deletions {
+		color: var(--dk-red);
+	}
+
+	div#cgit a.deco {
+		background-color: var(--dk-light-red);
+		border-color: var(--dk-dark-red);
+	}
+
+	div#cgit a.branch-deco {
+		background-color: var(--dk-green);
+		border-color: var(--dk-dark-green);
+	}
+
+	div#cgit a.remote-deco {
+		background-color: var(--dk-blue);
+		border-color: var(--dk-dark-blue);
+	}
+
+	div#cgit a.tag-deco {
+		background-color: var(--dk-yellow);
+		border-color: var(--dk-dark-yellow);
+	}
+
+	div#cgit a.tag-annotated-deco {
+		background-color: var(--dk-orange);
+		border-color: var(--dk-dark-orange);
+	}
+
+	div#cgit table.list td {
+		a.deco,
+		a.remote-deco,
+		a.branch-deco,
+		a.tag-deco,
+		a.tag-annotated-deco {
+			color: var(--dk-black);
+		}
+	}
+
+	input, select {
+		background-color: var(--dk-light-black);
+		color: var(--dk-white);
+		border-style: solid;
+		border-width: 1px;
+		border-radius: .2rem;
+	}
+
+	div#cgit table.diffstat {
+		background-color: var(--dk-light-black);
+	}
+	div#cgit table.diffstat td.graph td.add {
+		background-color: var(--dk-green);
+	}
+
+	div#cgit table.diffstat td.graph td.rem {
+		background-color: var(--dk-red);
+	}
+
+	div#cgit table.diffstat {
+		color: var(--dk-white);
+	}
+	div#cgit table.diff td div.head {
+		color: var(--dk-white);
+	}
+	div#cgit table.diff td div.hunk {
+		color: var(--dk-blue);
+	}
+
+	div#cgit table.diff td div.del {
+		color: var(--dk-red);
+	}
+
+	div#cgit table.diff td div.add {
+		color: var(--dk-green);
+	}
+
+	div#cgit div.cgit-panel table {
+		background-color: var(--dk-light-black);
+	}
+
+	div#cgit table.list td.commitgraph .column1 {
+		color: var(--dk-red);
+	}
+
+	div#cgit table.list td.commitgraph .column2 {
+		color: var(--dk-green);
+	}
+
+	div#cgit table.list td.commitgraph .column3 {
+		color: var(--dk-yellow);
+	}
+
+	div#cgit table.list td.commitgraph .column4 {
+		color: var(--dk-blue);
+	}
+
+	div#cgit table.list td.commitgraph .column5 {
+		color: var(--dk-purple);
+	}
+
+	div#cgit table.list td.commitgraph .column6 {
+		color: var(--dk-teal);
+	}
+
+	div#cgit table.diffstat td.add a {
+		color: var(--dk-green);
+	}
+
+	div#cgit table.diffstat td.del a {
+		color: var(--dk-red);
+	}
+
+	div#cgit table.diffstat td.upd a {
+		color: var(--dk-blue);
+	}
+
+	div#cgit table.blob td.hashes,
+	div#cgit table.blob td.lines {
+		color: var(--dk-white);
+	}
+
+	div#cgit div.path {
+		background-color: var(--dk-light-black);
+		color: var(--dk-white);
+	}
+
+	div#cgit table.blob td.linenumbers a,
+	div#cgit table.ssdiff td.lineno a {
+		color: var(--dk-dark-gray);
+	}
+
+	div#cgit table.blob td.linenumbers a:hover,
+	div#cgit table.ssdiff td.lineno a:hover {
+		color: var(--dk-white);
+	}
+
+	div#cgit table.blob td.linenumbers a:target:before {
+		color: var(--dk-light-red);
+	}
+
+	div#cgit table.blame div.alt:nth-child(even) {
+		background: var(--dk-light-black);
+	}
+
+	div#cgit table.blame div.alt:nth-child(odd) {
+		background: var(--dk-black);
+	}
+
+	div#cgit div.error {
+		color: var(--dk-light-red);
+	}
+
+	div#cgit table.stats {
+		border-color: var(--dk-gray);
+	}
+
+	div#cgit table.stats th {
+		background-color: var(--dk-light-black);
+		border-color: var(--dk-gray);
+	}
+
+	div#cgit table.stats td {
+		border-color: var(--dk-gray);
+	}
+
+	div#cgit table.stats td.sum {
+		color: var(--dk-light-red);
+	}
+}