ctucx.git: stagit

style.css: add dark theme

diff --git a/style.css b/style.css
@@ -1,3 +1,40 @@
+@media screen {
+	:root {
+		color-scheme:                   normal;
+		--body-background:              white;
+		--body-color:                   black;
+		--header-color:                 black;
+		--event-background:             #f8f9fa;
+		--event-pre-color:              #212529;
+		--breadcrumb-background:        #ccc;
+		--pre-background:               #ddd;
+		--pre-color:                    #212529;
+		--link-color:                   black;
+		--log-hover-background:         #ddd;
+		--insertion-color:              #080;
+		--deletion-color:               #800;
+	}
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	:root {
+		color-scheme:                   dark;
+		--body-background:              #212529;
+		--body-color:                   #f8f9fa;
+		--header-color:                 white;
+		--event-background:             #131618;
+		--event-pre-color:              #f8f9fa;
+		--breadcrumb-background:        #5A6066;
+		--pre-background:               #2c3237;
+		--pre-color:                    #fff;
+		--link-color:                   white;
+		--log-hover-background:         #2a2d2f;
+		--insertion-color:              #080;
+		--deletion-color:               #D80407;
+	}
+}
+
+
 * {
 	font-family: monospace;
 	line-height: 1.25;

@@ -10,6 +47,8 @@
 body {
 	margin: 0 auto;
 	max-width: 960px;
+	background: var(--body-background-color);
+	color: var(--body-color);
 }
 
 img {

@@ -17,7 +56,7 @@ img {
 }
 
 a {
-	color: black;
+	color: var(--link-color);
 	text-decoration: none;
 }
 

@@ -30,7 +69,7 @@ header {
 }
 
 header h1 {
-	color: #000;
+	color: var(--header-color);
 	font-size: 2em;
 	font-weight: bold;
 	margin-bottom: 0;

@@ -76,7 +115,7 @@ dl {
 }
 
 .breadcrumb {
-	background-color: #ccc;
+	background: var(--breadcrumb-background);
 	padding: 2px 1em;
 }
 

@@ -169,7 +208,7 @@ table.files > tbody > tr > td:nth-of-type(1) {
 	overflow: hidden;
 	padding: .5rem;
 	margin: .5rem 0;
-	background: #f8f9fa;
+	background: var(--event-background);
 }
 
 .event :last-child {

@@ -179,10 +218,10 @@ table.files > tbody > tr > td:nth-of-type(1) {
 .event pre {
     padding-left: 0;
     padding-right: 0;
-    background: 0 0;
+    background: inherit;
 	display: block;
 	font-size: 87.5%;
-	color: #212529;
+	color: var(--event-pre-color);
 }
 
 .event .commit pre {

@@ -195,7 +234,7 @@ table.files > tbody > tr > td:nth-of-type(1) {
 }
 
 .log div:hover {
-	background-color: #ddd;
+	background: var(--log-hover-background);
 }
 
 

@@ -206,8 +245,8 @@ table.files > tbody > tr > td:nth-of-type(1) {
  ***/
 
 pre {
-	background-color: #ddd;
-	color: #212529;
+	background: var(--pre-background);
+	color: var(--pre-color);
 	overflow: auto;
 	margin: 0;
 	padding: .25rem;

@@ -231,11 +270,11 @@ pre .line-number a {
 }
 
 .insertion {
-	color: #080;
+	color: var(--insertion-color);
 }
 
 .deletion {
-	color: #800;
+	color: var(--deletion-color);
 }