Add a dark mode to the default webskin

webskins/_default_/pub/_default_.css

@@ -1,5 +1,51 @@
 @charset "UTF-8";
 
+:root {
+  color-scheme: light dark;
+  --page-background-color: light-dark(#ffffff, #131314);
+  --page-color: light-dark(#000000, #fafafa);
+
+  --page-title-background-color: light-dark(#aaaaaa, #3e3e3f);
+
+  --wrapper-background-color: light-dark(#eeeeee, #1b1b1c);
+  --wrapper-border-color: light-dark(#cccccc, #464646);
+  --wrapper-box-shadow-color: light-dark(#666666, #29292a);
+
+  --link-color: light-dark(#00008b, #4493f8);
+
+  --main-link-visited-color: light-dark(#99008B, #b74cad);
+
+  --menu-border-color: light-dark(#aaaaaa, #3e3e3f);
+
+  --breadcrumb-border-color: light-dark(#aaaaaa, #3e3e3f);
+
+  --submit-line-border-color: light-dark(#aaaaaa, #3e3e3f);
+
+  --errorbar-background-color: light-dark(#900000, #5d0000);
+  --errorbar-color: light-dark(#ffffff, #dcdcdc);
+
+  --successbar-background-color: light-dark(#009000, #005d00);
+  --successbar-color: light-dark(#ffffff, #dcdcdc);
+
+  --banner-background-color: light-dark(#cccccc, #2a2a2b);
+  --banner-link-color: light-dark(#000000, #fafafa);
+
+  --infobar-background-color: light-dark(#cccccc, #2a2a2b);
+  --infobar-color: light-dark(#333333, #dcdcdc);
+
+  --infobar-input-background-color: light-dark(#ffffff, #0c0c0d);
+  --infobar-input-border-color: light-dark(#333333, #6b6b6c);
+
+  --input-border-color: light-dark(#cccccc, #3e3e3f);
+  --input-background-color: light-dark(#ffffff, #0c0c0d);
+  --input-focus-box-shadow-color: light-dark(#aaaaaa, #6b6b6c);
+
+  --table-border-color: light-dark(#cccccc, #3e3e3f);
+  --table-cell-background-color: light-dark(#cecece, #131314);
+  --table-even-row-background-color: light-dark(#dadada, #1e1e1f);
+  --table-header-background-color: light-dark(#a0a0a0, #29292a);
+}
+
 * {
 	margin: 0;
 	padding: 0;
@@ -11,13 +57,13 @@ html {
 
 body {
 	height: 100%;
-	background-color: #fff;
-	color: #000;
+	background-color: var(--page-background-color);
+	color: var(--page-color);
 	font-family: Tahoma, sans-serif;
 }
 
 a, a:link, a:active, a:visited, a:focus {
-	color: #00008B;
+  color: var(--link-color);
 	text-decoration: none;
 	outline: none;
 }
@@ -27,29 +73,27 @@ a:hover {
 }
 
 #main a:visited {
-	color: #99008B;
+	color: var(--main-link-visited-color);
 }
 
 #wrapper {
-	background-color: #eee;
+  background-color: var(--wrapper-background-color);
 	min-height: 80%;
 	overflow: hidden;
 	margin: 0 auto;
 	width: 900px;
 
-	border: 1px solid #ccc;
+  border: 1px solid var(--wrapper-border-color);
 	border-top: none;
-	-moz-box-shadow: 0 0 1em #666;
-	-webkit-box-shadow: 0 0 1em #666;
-	box-shadow: 0 0 1em #666;
+	box-shadow: 0 0 1em var(--wrapper-box-shadow-color);
 }
 
 #banner_top {
-	background-color: #ccc;
+  background-color: var(--banner-background-color);
 }
 
 #banner_top a {
-	color: #000;
+	color: var(--banner-link-color);
 	text-decoration: none;
 }
 
@@ -58,7 +102,7 @@ h1 {
 	padding: 0 0.9em 0 0.6em;
 	width: 50px;
 	text-align: center;
-	background-color: #aaa;
+  background-color: var(--page-title-background-color);
 	font-weight: normal;
 	font-style: italic;
 	font-size: 100%;
@@ -79,7 +123,7 @@ h1 {
 }
 
 #menu {
-	border-left: 2px solid #aaa;
+	border-left: 2px solid var(--menu-border-color);
 	padding-left: 10px;
 	position: absolute;
 	margin-left: 700px;
@@ -131,8 +175,8 @@ ul.nav li.subitem {
 	position: relative;
 	top: -30px;
 	margin-left: 485px;
-	background-color: #ccc;
-	color: #333;
+	background-color: var(--infobar-background-color);
+  color: var(--infobar-color)
 	padding: 0 6px 3px 0;
 }
 
@@ -141,6 +185,7 @@ ul.nav li.subitem {
 }
 
 #infobar input {
+  background-color: var(--infobar-input-background-color);
 	border: none;
 	font-family: Tahoma, sans-serif;
 	padding: 1px;
@@ -150,7 +195,7 @@ ul.nav li.subitem {
 }
 
 #infobar input.submit {
-	border: 1px solid #333;
+	border: 1px solid var(--infobar-input-border-color);
 	font-size: 12px;
 	width: 60px;
 }
@@ -171,14 +216,15 @@ ul.nav li.subitem {
 .successbar,
 .errorbar {
 	width: 100%;
-	background-color: #900;
+	background-color: var(--errorbar-background-color);
+  color: var(--errorbar-color);
 	padding: 5px 10px;
 	font-weight: bold;
-	color: #fff;
 }
 
 .successbar {
-	background-color: #070;
+	background-color: var(--successbar-background-color);
+  color: var(--successbar-color);
 }
 
 h2 {
@@ -204,16 +250,15 @@ h3 {
 }
 
 .sectionbody input, textarea, select {
-	border: 2px solid #ccc;
+  background-color: var(--input-background-color);
+	border: 2px solid var(--input-border-color);
 	font-family: Tahoma, sans-serif;
 	padding: 3px;
 	font-size: 14px;
 }
 
 input:focus, textarea:focus, select:focus {
-	-moz-box-shadow: 0 0 0.4em #aaa;
-	-webkit-box-shadow: 0 0 0.4em #aaa;
-	box-shadow: 0 0 0.4em #aaa;
+	box-shadow: 0 0 0.4em var(--input-focus-box-shadow-color);
 	outline: none; /* for webkit */
 }
 
@@ -224,7 +269,7 @@ textarea {
 div.submitline {
 	margin: 1em;
 	padding-top: 1em;
-	border-top: 1px solid #aaa;
+	border-top: 1px solid var(--submit-line-border-color);
 }
 
 .submitline input {
@@ -263,7 +308,7 @@ input[type=number] {
 }
 
 table {
-	border: 1px solid #ccc;
+	border: 1px solid var(--table-border-color);
 	border-spacing: 1px;
 }
 
@@ -273,7 +318,7 @@ td, th {
 }
 
 thead td, th {
-	background-color: #a0a0a0;
+	background-color: var(--table-header-background-color);
 }
 
 th {
@@ -281,11 +326,11 @@ th {
 }
 
 tbody td {
-	background-color: #cecece;
+  background-color: var(--table-cell-background-color);
 }
 
 tr.evenrow td {
-	background-color: #dadada;
+	background-color: var(--table-even-row-background-color);
 }
 
 .info {
@@ -378,7 +423,7 @@ td.center {
 	width: 670px;
 	padding: 0 0 3px 1px;
 	margin-bottom: 10px;
-	border-bottom: 1px solid #aaa;
+	border-bottom: 1px solid var(--breadcrumb-border-color);
 }
 
 #servers_js > div:first-child {