dark mode, page only

server/styles/scss/_page.scss

@@ -5,6 +5,17 @@
 
 body {
 	font-family: "Star4000";
+
+	@media (prefers-color-scheme: dark) {
+		background-color: #000000;
+		color: white;
+	}
+
+	a {
+		@media (prefers-color-scheme: dark) {
+			color: lightblue;
+		}
+	}
 }
 
 input,
@@ -20,12 +31,42 @@ button {
 #txtAddress {
 	width: 490px;
 	font-size: 16pt;
+
+	@media (prefers-color-scheme: dark) {
+		background-color: #000000;
+		color: white;
+		border: 1px solid darkgray;
+	}
 }
 
 #btnGetGps,
 #btnGetLatLng,
 #btnClearQuery {
 	font-size: 16pt;
+
+	@media (prefers-color-scheme: dark) {
+		background-color: #000000;
+		color: white;
+	}
+
+	border: 1px solid darkgray;
+}
+
+#btnGetGps img {
+
+	&.dark {
+		display: none;
+
+		@media (prefers-color-scheme: dark) {
+			display: inline-block;
+		}
+	}
+
+	&.light {
+		@media (prefers-color-scheme: dark) {
+			display: none;
+		}
+	}
 }
 
 .autocomplete-suggestions {
@@ -90,6 +131,11 @@ button {
 	display: flex;
 	flex-direction: row;
 	background-color: #000000;
+
+	@media (prefers-color-scheme: dark) {
+		background-color: rgb(48, 48, 48);
+	}
+
 	color: #ffffff;
 	width: 100%;
 }

views/index.ejs

@@ -61,7 +61,7 @@
 
   <div id="divQuery">
     <form id="frmGetLatLng">
-      <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img id="imgGetGps" src="images/nav/ic_gps_fixed_black_18dp_1x.png" /></button>
+      <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/><img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/></button>
       <input id="btnGetLatLng" type="submit" value="GO" />
       <input id="btnClearQuery" type="reset" value="Reset" />
     </form>