diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php
index bb931dd0..d7ef05a5 100644
--- a/application/views/interface_assets/footer.php
+++ b/application/views/interface_assets/footer.php
@@ -6,6 +6,7 @@
 <script src="<?php echo base_url(); ?>assets/js/jquery.jclock.js"></script>
 <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/leaflet.js"></script>
 <script type="text/javascript" src="<?php echo base_url() ;?>assets/js/radiohelpers.js"></script>
+<script type="text/javascript" src="<?php echo base_url() ;?>assets/js/darkmodehelpers.js"></script>
 <script src="<?php echo base_url(); ?>assets/js/bootstrapdialog/js/bootstrap-dialog.min.js"></script>
 <script type="text/javascript">
   /*
@@ -985,10 +986,8 @@ $(document).ready(function(){
         ]
     });
 
-    // using this to change color of csv-button if dark mode is chosen
-    var background = $('body').css( "background-color");
-
-    if (background != ('rgb(255, 255, 255)')) {
+    // change color of csv-button if dark mode is chosen
+    if (isDarkModeTheme()) {
         $(".buttons-csv").css("color", "white");
     }
  </script>
@@ -1010,10 +1009,8 @@ $(document).ready(function(){
         ]
     });
 
-    // using this to change color of csv-button if dark mode is chosen
-    var background = $('body').css( "background-color");
-
-    if (background != ('rgb(255, 255, 255)')) {
+    // change color of csv-button if dark mode is chosen
+    if (isDarkModeTheme()) {
         $(".buttons-csv").css("color", "white");
     }
     </script>
@@ -1078,10 +1075,8 @@ $(document).ready(function(){
             ]
         });
 
-        // using this to change color of csv-button if dark mode is chosen
-        var background = $('body').css( "background-color");
-
-        if (background != ('rgb(255, 255, 255)')) {
+        // change color of csv-button if dark mode is chosen
+        if (isDarkModeTheme()) {
             $(".buttons-csv").css("color", "white");
         }
     </script>
@@ -1115,10 +1110,8 @@ $(document).ready(function(){
             ]
         });
 
-        // using this to change color of csv-button if dark mode is chosen
-        var background = $('body').css( "background-color");
-
-        if (background != ('rgb(255, 255, 255)')) {
+        // change color of csv-button if dark mode is chosen
+        if (isDarkModeTheme()) {
             $(".buttons-csv").css("color", "white");
         }
     </script>
@@ -1151,10 +1144,8 @@ $(document).ready(function(){
             ]
         });
 
-        // using this to change color of csv-button if dark mode is chosen
-        var background = $('body').css( "background-color");
-
-        if (background != ('rgb(255, 255, 255)')) {
+        // change color of csv-button if dark mode is chosen
+        if (isDarkModeTheme()) {
             $(".buttons-csv").css("color", "white");
         }
     </script>
@@ -1421,10 +1412,8 @@ $(document).ready(function(){
                 ]
             });
 
-            // using this to change color of csv-button if dark mode is chosen
-            var background = $('body').css( "background-color");
-
-            if (background != ('rgb(255, 255, 255)')) {
+            // change color of csv-button if dark mode is chosen
+            if (isDarkModeTheme()) {
                 $(".buttons-csv").css("color", "white");
             }
 
@@ -1831,10 +1820,9 @@ function deleteQsl(id) {
             'csv'
         ]
     });
-    // using this to change color of csv-button if dark mode is chosen
-    var background = $('body').css( "background-color");
 
-    if (background != ('rgb(255, 255, 255)')) {
+    // change color of csv-button if dark mode is chosen
+    if (isDarkModeTheme()) {
         $(".buttons-csv").css("color", "white");
     }
 
@@ -1880,13 +1868,10 @@ function deleteQsl(id) {
 			]
 		});
 
-		// using this to change color of csv-button if dark mode is chosen
-		var background = $('body').css( "background-color");
-
-		if (background != ('rgb(255, 255, 255)')) {
+		// change color of csv-button if dark mode is chosen
+		if (isDarkModeTheme()) {
 			$(".buttons-csv").css("color", "white");
 		}
-
 	</script>
 <?php } ?>
 
diff --git a/application/views/statistics/index.php b/application/views/statistics/index.php
index a1a79a94..f3017d5d 100644
--- a/application/views/statistics/index.php
+++ b/application/views/statistics/index.php
@@ -1,131 +1,208 @@
-  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-	<script type="text/javascript">
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script type="text/javascript">
 
-	  // Load the Visualization API and the piechart package.
-	  google.load('visualization', '1', {'packages':['corechart']});
+	// Load the Visualization API and the piechart package.
+	google.load('visualization', '1', {'packages':['corechart']});
 
-	  // Set a callback to run when the Google Visualization API is loaded.
-	  google.setOnLoadCallback(drawModeChart);
-	  google.setOnLoadCallback(drawBandChart);
-	  google.setOnLoadCallback(drawSatChart);
+	// Set a callback to run when the Google Visualization API is loaded.
+	google.setOnLoadCallback(drawModeChart);
+	google.setOnLoadCallback(drawBandChart);
+	google.setOnLoadCallback(drawSatChart);
 
-	  // Callback that creates and populates a data table, 
-	  // instantiates the pie chart, passes in the data and
-	  // draws it.
-	  function drawModeChart() {
+	// Callback that creates and populates a data table, 
+	// instantiates the pie chart, passes in the data and
+	// draws it.
+	function drawModeChart() {
 
-	  // Create our data table.
-	  var data = new google.visualization.DataTable();
-	  data.addColumn('string', 'Topping');
-	  data.addColumn('number', 'Slices');
-	  data.addRows([
-		['SSB', <?php echo $total_ssb; ?>],
-		['CW', <?php echo $total_cw; ?>],
-		['FM', <?php echo $total_fm; ?>], 
-		['Digi', <?php echo $total_digi; ?>],
-	  ]);
-
-	  // Instantiate and draw our chart, passing in some options.
-	  var chart = new google.visualization.PieChart(document.getElementById('modechart_div'));
-	   chart.draw(data, {width: 700, height: 440});
-	}
-
-	 function drawBandChart() {
-
-	  // Create our data table.
-	  var data = new google.visualization.DataTable();
-	  data.addColumn('string', 'Topping');
-	  data.addColumn('number', 'Slices');
-	  data.addRows([
-
-		<?php foreach($total_bands->result() as $row) { ?>
-			['<?php echo $row->band; ?>', <?php echo $row->count; ?>],
-		<?php } ?>
-
-	  ]);
-
-	  // Instantiate and draw our chart, passing in some options.
-	  var chart = new google.visualization.PieChart(document.getElementById('bandchart_div'));
-	  chart.draw(data, {width: 700, height: 440});
-	}
-	
-	function drawSatChart() {
-
-	  // Create our data table.
-	  var data = new google.visualization.DataTable();
-	  data.addColumn('string', 'Topping');
-	  data.addColumn('number', 'Slices');
-	  data.addRows([
-
-		<?php foreach($total_sat->result() as $row1) { ?>
-			<?php if($row1->COL_SAT_NAME != null) { ?>
-			['<?php echo $row1->COL_SAT_NAME; ?>', <?php echo $row1->count; ?>],
-			<?php } ?>
-		<?php } ?>
-
-	  ]);
-
-	  // Instantiate and draw our chart, passing in some options.
-	  var chart = new google.visualization.PieChart(document.getElementById('satchart_div'));
-	  chart.draw(data, {width: 700, height: 440});
-	}
-
-	</script>
-	<script type="text/javascript">
-	  google.setOnLoadCallback(barchart);
-	  function barchart() {
-		var data = google.visualization.arrayToDataTable([
-		  ['Year', 'QSOs'],
-		  <?php foreach($totals_year->result() as $qso_numbers) { ?>
-		  ['<?php echo $qso_numbers->year; ?>',  <?php echo $qso_numbers->total; ?>],
-		  <?php } ?>
+		// Create our data table.
+		var data = new google.visualization.DataTable();
+		data.addColumn('string', 'Topping');
+		data.addColumn('number', 'Slices');
+		data.addRows([
+			['SSB', <?php echo $total_ssb; ?>],
+			['CW', <?php echo $total_cw; ?>],
+			['FM', <?php echo $total_fm; ?>], 
+			['Digi', <?php echo $total_digi; ?>],
 		]);
 
+		var color = ifDarkModeThemeReturn('white');
 		var options = {
-		  title: 'Total QSOs Per Year',
-		  vAxis: {title: 'QSOs',  titleTextStyle: {color: 'black'}},
-		  hAxis: {title: 'Year', titleTextStyle: {color: 'black'}}
+			title: 'Modes',
+			width: 900,
+			height: 440,
+			backgroundColor: getBodyBackground(),
+			legendTextStyle: {
+				color: color
+			},
+			titleTextStyle: {
+				fontSize: 20,
+				color: color
+			},
+			hAxisTextStyle: {
+				color: color
+			},
+			vAxisTextStyle: {
+				color: color
+			}
+		};
 
+		// Instantiate and draw our chart, passing in some options.
+		var chart = new google.visualization.PieChart(document.getElementById('modechart_div'));
+		chart.draw(data, options);
+	}
+
+	function drawBandChart() {
+
+		// Create our data table.
+		var data = new google.visualization.DataTable();
+		data.addColumn('string', 'Topping');
+		data.addColumn('number', 'Slices');
+		data.addRows([
+			<?php foreach($total_bands->result() as $row) { ?>
+				['<?php echo $row->band; ?>', <?php echo $row->count; ?>],
+			<?php } ?>
+		]);
+
+		var color = ifDarkModeThemeReturn('white');
+		var options = {
+			title: 'Bands',
+			width: 900,
+			height: 440,
+			backgroundColor: getBodyBackground(),
+			legendTextStyle: {
+				color: color
+			},
+			titleTextStyle: {
+				fontSize: 20,
+				color: color
+			},
+			hAxisTextStyle: {
+				color: color
+			},
+			vAxisTextStyle: {
+				color: color
+			}
+		};
+
+		// Instantiate and draw our chart, passing in some options.
+		var chart = new google.visualization.PieChart(document.getElementById('bandchart_div'));
+		chart.draw(data, options);
+	}
+
+	function drawSatChart() {
+		// Create our data table.
+		var data = new google.visualization.DataTable();
+		data.addColumn('string', 'Topping');
+		data.addColumn('number', 'Slices');
+		data.addRows([
+			<?php foreach($total_sat->result() as $row1) { ?>
+				<?php if($row1->COL_SAT_NAME != null) { ?>
+				['<?php echo $row1->COL_SAT_NAME; ?>', <?php echo $row1->count; ?>],
+				<?php } ?>
+			<?php } ?>
+		]);
+
+		var color = ifDarkModeThemeReturn('white');
+		var options = {
+			width: 900,
+			height: 440,
+			backgroundColor: getBodyBackground(),
+			legendTextStyle: {
+				color: color
+			},
+			titleTextStyle: {
+				fontSize: 20,
+				color: color
+			},
+			hAxisTextStyle: {
+				color: color
+			},
+			vAxisTextStyle: {
+				color: color
+			}
+		};
+
+		// Instantiate and draw our chart, passing in some options.
+		var chart = new google.visualization.PieChart(document.getElementById('satchart_div'));
+		chart.draw(data, options);
+	}
+</script>
+<script type="text/javascript">
+	google.setOnLoadCallback(barchart);
+	function barchart() {
+		var data = google.visualization.arrayToDataTable([
+			['Year', 'QSOs'],
+			<?php foreach($totals_year->result() as $qso_numbers) { ?>
+				['<?php echo $qso_numbers->year; ?>',  <?php echo $qso_numbers->total; ?>],
+			<?php } ?>
+		]);
+
+		var color = ifDarkModeThemeReturn('white');
+		var options = {
+			title: 'Total QSOs Per Year',
+			width: 900,
+			height: 500,
+			backgroundColor: getBodyBackground(),
+			legendTextStyle: {
+				color: color
+			},
+			titleTextStyle: {
+				fontSize: 20,
+				color: color
+			},
+			hAxis: {
+				title: 'Year',
+				titleTextStyle: {
+					color: color
+				},
+				textStyle: {
+					color: color
+				}
+			},
+			vAxis: {
+				title: 'QSOs',
+				titleTextStyle: {
+					color: color
+				},
+				textStyle: {
+					color: color
+				}
+			}
 		};
 
 		var chart = new google.visualization.ColumnChart(document.getElementById('totals_year'));
 		chart.draw(data, options);
-	  }
-	</script>
+	}
+</script>
 
 <div class="container statistics">
 
+	<h2>
+		<?php echo $page_title; ?>
+		<small class="text-muted">Explore the logbook.</small>
+	</h2>
 
-<h2>
-  <?php echo $page_title; ?>
-  <small class="text-muted">Explore the logbook.</small>
-</h2>
+	<br>
 
+	<ul class="nav nav-tabs" id="myTab" role="tablist">
+		<li class="nav-item">
+			<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">General</a>
+		</li>
+		<li class="nav-item">
+			<a class="nav-link" id="satellite-tab" data-toggle="tab" href="#satellite" role="tab" aria-controls="satellite" aria-selected="false">Satellites</a>
+		</li>
+	</ul>
 
-<br>
-
-<ul class="nav nav-tabs" id="myTab" role="tablist">
-  <li class="nav-item">
-    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">General</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" id="satellite-tab" data-toggle="tab" href="#satellite" role="tab" aria-controls="satellite" aria-selected="false">Satellites</a>
-  </li>
-</ul>
-
-<div class="tab-content" id="myTabContent">
-  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-  	<div id="totals_year" style="width: 900px; height: 500px;"></div>
-	<div id="modechart_div"></div>
-	<div id="bandchart_div"></div>
-  </div>
-  
-  <div class="tab-pane fade" id="satellite" role="tabpanel" aria-labelledby="satellite-tab">
-  	<div id="satchart_div"></div>
-  </div>
-  
-</div>
-
+	<div class="tab-content" id="myTabContent">
+		<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+			<div id="totals_year"></div>
+			<div id="modechart_div"></div>
+			<div id="bandchart_div"></div>
+		</div>
 
+		<div class="tab-pane fade" id="satellite" role="tabpanel" aria-labelledby="satellite-tab">
+			<div id="satchart_div"></div>
+		</div>
+	</div>
 
 </div>
diff --git a/assets/js/darkmodehelpers.js b/assets/js/darkmodehelpers.js
new file mode 100644
index 00000000..2afe889a
--- /dev/null
+++ b/assets/js/darkmodehelpers.js
@@ -0,0 +1,41 @@
+// use closure to cache result (color is only read once)
+function _getBodyBackground() {
+	var result = null;
+	function inner() {
+		if (result === null) {
+			result = $('body').css( "background-color");
+		}
+		return result;
+	}
+	return inner;
+}
+getBodyBackground = _getBodyBackground();
+
+// use closure to cache result (check it once is enough)
+function _isDarkModeTheme() {
+	var result = null;
+	function inner() {
+		if (result === null) {
+			// TODO use better solution as soon as the themes know if they are dark or not
+			// check if background color is white
+			result = false;
+			var background = getBodyBackground();
+			if (background != ('rgb(255, 255, 255)')) {
+				result = true;
+			}
+		}
+		return result;
+	}
+	return inner;
+}
+isDarkModeTheme = _isDarkModeTheme();
+
+function ifDarkModeThemeReturn(darkModeValue, notDarkModeValue) {
+	if (isDarkModeTheme()) {
+		return darkModeValue;
+	}
+	if (!notDarkModeValue) {
+		return null;
+	}
+	return notDarkModeValue;
+}
diff --git a/assets/js/sections/accumulatedstatistics.js b/assets/js/sections/accumulatedstatistics.js
index 0de4e902..349a471a 100644
--- a/assets/js/sections/accumulatedstatistics.js
+++ b/assets/js/sections/accumulatedstatistics.js
@@ -3,11 +3,7 @@ function accumulatePlot(form) {
 	$(".ld-ext-right").prop('disabled', true);
 
 	// using this to change color of legend and label according to background color
-	var background = $('body').css( "background-color");
-	var color = 'grey';
-	if (background != ('rgb(255, 255, 255)')) {
-		color = 'white';
-	}
+	var color = ifDarkModeThemeReturn('white', 'grey');
 
 	var award = form.awardradio.value;
 	var mode = form.mode.value;
@@ -99,9 +95,9 @@ function accumulatePlot(form) {
 					},
 					legend: {
 						labels: {
-							fontColor: color,
+							fontColor: color
 						}
-					},
+					}
 				}
 			});
 			$(".ld-ext-right").removeClass('running');
diff --git a/assets/js/sections/dayswithqso.js b/assets/js/sections/dayswithqso.js
index 361d5ec0..23e0a819 100644
--- a/assets/js/sections/dayswithqso.js
+++ b/assets/js/sections/dayswithqso.js
@@ -8,6 +8,7 @@ $.ajax({
 			dataDxcc.push(this.Days);
 		});
 		var ctx = document.getElementById("myChartDiff").getContext('2d');
+		var color = ifDarkModeThemeReturn('white', 'grey');
 		var myChart = new Chart(ctx, {
 			type: 'bar',
 			data: {
@@ -24,10 +25,21 @@ $.ajax({
 				scales: {
 					yAxes: [{
 						ticks: {
-							beginAtZero:true
+							beginAtZero:true,
+							fontColor: color
+						}
+					}],
+					xAxes: [{
+						ticks: {
+							fontColor: color
 						}
 					}]
 				},
+				legend: {
+					labels: {
+						fontColor: color
+					}
+				}
 			}
 		});
 	}
diff --git a/assets/js/sections/distances.js b/assets/js/sections/distances.js
index 95e409b8..16c2ce84 100644
--- a/assets/js/sections/distances.js
+++ b/assets/js/sections/distances.js
@@ -19,26 +19,43 @@ function distPlot(form) {
 			if (tmp.ok == 'OK') {
 				if (!($('#information').length > 0))
 					$("#distances_div").append('<div id="information"></div><div id="graphcontainer" style="height: 600px; margin: 0 auto"></div>');
+				var color = ifDarkModeThemeReturn('white', 'grey');
 				var options = {
 					chart: {
 						type: 'column',
 						zoomType: 'xy',
-						renderTo: 'graphcontainer'
+						renderTo: 'graphcontainer',
+						backgroundColor: getBodyBackground()
 					},
 					title: {
-						text: 'Distance Distribution'
+						text: 'Distance Distribution',
+						style: {
+							color: color
+						}
 					},
 					xAxis: {
 						categories: [],
 						crosshair: true,
 						type: "category",
 						min:0,
-						max:100
-
+						max:100,
+						labels: {
+							style: {
+								color: color
+							}
+						}
 					},
 					yAxis: {
 						title: {
-							text: '# QSOs'
+							text: '# QSOs',
+							style: {
+								color: color
+							}
+						},
+						labels: {
+							style: {
+								color: color
+							}
 						}
 					},
 					navigator: {
@@ -47,6 +64,9 @@ function distPlot(form) {
 							labels: {
 								formatter: function() {
 									return this.value * '50' + ' ' + tmp.unit;
+								},
+								style: {
+									color: color
 								}
 							}
 						}
@@ -63,6 +83,11 @@ function distPlot(form) {
 							}
 						}
 					},
+					legend: {
+						itemStyle: {
+							color: color
+						}
+					},
 					series: []
 				};
 				var myComments=[];
@@ -77,7 +102,6 @@ function distPlot(form) {
 					options.xAxis.categories.push(this.dist);
 					series.name = 'Number of QSOs';
 					series.data.push(this.count);
-
 				});
 
 				options.series.push(series);
diff --git a/assets/js/sections/timeplot.js b/assets/js/sections/timeplot.js
index 8d1f1699..4aaeef7e 100644
--- a/assets/js/sections/timeplot.js
+++ b/assets/js/sections/timeplot.js
@@ -27,14 +27,19 @@ function plotTimeplotterChart(tmp) {
 	$("#container").remove();
 	$("#info").remove();
 	$("#timeplotter_div").append('<p id="info">' + tmp.qsocount + ' contacts were plotted.</p><div id="container" style="height: 600px;"></div>');
+	var color = ifDarkModeThemeReturn('white', 'grey');
 	var options = {
 		chart: {
 			type: 'column',
 			zoomType: 'xy',
-			renderTo: 'container'
+			renderTo: 'container',
+			backgroundColor: getBodyBackground()
 		},
 		title: {
-			text: 'Time Distribution'
+			text: 'Time Distribution',
+			style: {
+				color: color
+			}
 		},
 		xAxis: {
 			categories: [],
@@ -42,10 +47,23 @@ function plotTimeplotterChart(tmp) {
 			type: "category",
 			min:0,
 			max:47,
+			labels: {
+				style: {
+					color: color
+				}
+			}
 		},
 		yAxis: {
 			title: {
-				text: '# QSOs'
+				text: '# QSOs',
+				style: {
+					color: color
+				}
+			},
+			labels: {
+				style: {
+					color: color
+				}
 			}
 		},
 		rangeSelector: {
@@ -60,6 +78,11 @@ function plotTimeplotterChart(tmp) {
 				}
 			}
 		},
+		legend: {
+			itemStyle: {
+				color: color
+			}
+		},
 		series: []
 	};
 	var myComments=[];