add dark mode support

assets/css/main.css

@@ -31,11 +31,6 @@ strong {
     font-weight: 700;
 }
 
-/* Constants */
-#header, #footer, #tagline {
-
-}
-
 /* Header */
 #header {
     background: #EBEBEB;
@@ -296,3 +291,48 @@ h3 {
     margin-top: 20px;
     font-size: 22px;
 }
+
+/* Mojang status colors */
+.mojang-status-online {
+	background: #87D37C;
+}
+
+.mojang-status-unstable {
+	background: #f1c40f;
+}
+
+.mojang-status-offline {
+	background: #DE5749;
+}
+
+/* Dark color scheme overrides */
+@media (prefers-color-scheme: dark) {
+	body {
+		background: #1c1b1c;
+	}
+
+	#header, #footer {
+		background: #3B3738;
+		color: #FFF;
+	}
+
+	#footer a, #header a:hover {
+		border-bottom: 1px dashed transparent !important;
+	}
+
+	#footer a:hover, #header a {
+		border-bottom: 1px dashed #EBEBEB !important;
+	}
+
+	.mojang-status-online {
+		background: #6b9963;
+	}
+
+	.mojang-status-unstable {
+		background: #a87b4b;
+	}
+
+	.mojang-status-offline {
+		background: #A6453B;
+	}
+}

assets/js/util.js

@@ -8,12 +8,6 @@ var publicConfig;
 var createdCategories = false;
 var categoriesVisible;
 
-var colorsByStatus = {
-    'Online': '#87D37C',
-    'Unstable': '#f1c40f',
-    'Offline': '#DE5749'
-};
-
 function showCaption(html) {
     var tagline = $('#tagline-text');
     tagline.stop(true, false);
@@ -116,9 +110,10 @@ function updateMojangServices(currentUpdate) {
 
     for (var i = 0; i < keys.length; i++) {
         var key = keys[i];
-        var status = lastMojangServiceUpdate[key];
+		var status = lastMojangServiceUpdate[key];
 
-        $('#mojang-status_' + status.name).css({background: colorsByStatus[status.title]});
+		// hack: ensure mojang-status is added for alignment, replace existing class to swap status color
+        $('#mojang-status_' + status.name).attr('class', 'mojang-status mojang-status-' + status.title.toLowerCase());
         $('#mojang-status-text_' + status.name).text(status.title);
     }
 }