[style] add dark mode (#2029)

static/HtmlFormat.css

@@ -120,3 +120,26 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
 	}
 
 }
+
+/* Dark theme, will automatically be set for those that have dark mode on their OS. */
+@media (prefers-color-scheme: dark){
+
+	* {
+		scrollbar-color: #202324 #454a4d;
+	}
+
+	body {
+		background-color: #202325;
+		color: #e8e6e3;
+	}
+
+	a, a:link, a:visited {
+		color: #0A6AB6;
+	}
+
+	/* Section */
+	section {
+		background-color: #181A1B;
+	}
+
+}

static/style.css

@@ -383,3 +383,55 @@ h5 {
 	}
 
 }
+
+/* Dark theme */
+@media (prefers-color-scheme: dark){
+	* {
+		scrollbar-color: #202324 #454a4d;
+	}
+
+	body {
+		background-color: #202325;
+		color: #e8e6e3;
+	}
+
+	a, a:link, a:visited {
+		color: #0A6AB6;
+	}
+
+	/* Header */
+	select,
+	input[type="text"],
+	input[type="number"] {
+		background-color: #181A1B;
+		/* does not apply to placeholder text without !important */
+		color: white !important;
+
+		border: 1px solid #393E40;
+	}
+
+	/* Section */
+	section {
+		background-color: #181A1B;
+	}
+
+	/* Buttons */
+	button {
+		background: #0A6AB6 none repeat scroll 0% 0%;
+	}
+
+	button:hover {
+		background: #004daa;
+	}
+
+	@supports (display: grid){
+		.parameters input[type="number"] {
+			color: #BAB4AB;
+		}
+	}
+
+	/* Show more / less */
+	.showmore:hover, .showless:hover {
+		color: #d8d3cb;
+	}
+}