diff --git a/html/css/styles.css b/html/css/styles-bright.css
similarity index 100%
rename from html/css/styles.css
rename to html/css/styles-bright.css
diff --git a/html/css/styles-dark.css b/html/css/styles-dark.css
new file mode 100644
index 0000000..5ce3405
--- /dev/null
+++ b/html/css/styles-dark.css
@@ -0,0 +1,66 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+	position: relative;
+	min-height: 100%;
+}
+body {
+	margin-bottom: 60px; /* Margin bottom by footer height */
+	background: #191919;
+	color: #dddddd;
+}
+
+label {
+    color: #dddddd;
+}
+
+.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
+    color: #dddddd;
+}
+
+.footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 60px; /* Set the fixed height of the footer here */
+	line-height: 60px; /* Vertically center the text there */
+	background-color: #000000;
+}
+
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+a:link, a:visited {
+	color: #dddddd;
+}
+
+a:hover {
+	color: #ababab;
+}
+
+table.dataTable {
+	color: #adb5bd;
+}
+
+.table-striped tbody tr:nth-of-type(even) {
+	background-color: #595959;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+	background-color: #797979;
+}
+
+.container {
+	width: auto;
+	padding: 0 15px;
+}
+
+td.dt-nowrap { white-space: nowrap }
+
+.red {
+  background-color: #7d0f0f !important;
+}
+
+
+#services_monitor_list {list-style-type: none;}
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index ce560d3..51f3d38 100644
--- a/html/index.html
+++ b/html/index.html
@@ -27,7 +27,7 @@
 		<script type="text/javascript" src="js/config.js"></script>
 		<script type="text/javascript" src="metar.js/metar.js"></script>
 		<script type="text/javascript" src="js/functions.js"></script>
-		<link rel="stylesheet" href="css/styles.css">
+		<!--<link rel="stylesheet" href="css/styles.css">-->
 		<link rel="stylesheet" href="css/tooltip.css">
 		<link href="open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
 		<title>DG9VH - MMDVM-Dashboard by DG9VH</title>
diff --git a/html/js/config.js b/html/js/config.js
index 311aa34..24780a6 100644
--- a/html/js/config.js
+++ b/html/js/config.js
@@ -1,5 +1,5 @@
 // config structure version, please change to value in github-file after update and adding new values
-var config_struc_ver = 20210414.1;
+var config_struc_ver = 20210421.1;
 
 // 1 = show link to QRZ.com, 0 = off
 var qrz = 1;
@@ -40,3 +40,6 @@ var qrz_blacklist = [
 var dashboard_blacklist = [
 "MY0CALL",
 ]
+
+// 1 = enable dark display theme, 0 = use bright theme
+var useDarkTheme = 1;
\ No newline at end of file
diff --git a/html/js/functions.js b/html/js/functions.js
index 9202c50..385b91e 100644
--- a/html/js/functions.js
+++ b/html/js/functions.js
@@ -1,4 +1,4 @@
-var act_config_struc_ver = 20210314.1;
+var act_config_struc_ver = 20210321.1;
 var messagecount = 0;
 var ts1TXing = null;
 var ts2TXing = null;
@@ -25,6 +25,15 @@ var array_services = [];
 
 setInterval(getCurrentTXing, 1000);
 
+var element = document.createElement("link");
+element.setAttribute("rel", "stylesheet");
+element.setAttribute("type", "text/css");
+if (useDarkTheme)
+	element.setAttribute("href", "css/styles-dark.css");
+else
+	element.setAttribute("href", "css/styles-bright.css");
+document.getElementsByTagName("head")[0].appendChild(element);
+
 function logIt(message) {
 	if (debug == 1 || message.startsWith("Logtailer-Errormessage:")) {
 		console.log(JSON.stringify(message));
diff --git a/html/js/version.js b/html/js/version.js
index 3395fe9..d9ccb21 100644
--- a/html/js/version.js
+++ b/html/js/version.js
@@ -1 +1 @@
-var dashboard_version = "2021-04-14 22:04:34";
+var dashboard_version = "2021-04-21 21:23:20";