Dynamically change theme css

cyoung · Aug 19, 2020 · b28b002 · b28b002
1 parent 4241d2a
commit b28b002
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/web/index.html b/web/index.html
@@ -50,6 +50,7 @@
 
 	<link rel="stylesheet" href="css/main.css" />
 	<link rel="stylesheet" href="css/ahrs.css" />
+	<link rel="stylesheet" id="themeStylesheet" href="" />
 
 	<script src="maui/js/angular.min.js"></script>
 	<script src="maui/js/angular-ui-router.min.js"></script>

diff --git a/web/js/main.js b/web/js/main.js
@@ -99,7 +99,23 @@ app.controller('MainCtrl', function ($scope, $http) {
     .then(function(response) {
 			var settings = angular.fromJson(response.data);
             $scope.DeveloperMode = settings.DeveloperMode;
+
+            // Update theme
+            $scope.updateTheme(settings.DarkMode);
     }, function(response) {
         //Second function handles error
     });	
+
+    $scope.updateTheme = function(darkMode) {
+        if(darkMode != $scope.DarkMode) {
+            // console.log("Updating theme, use dark mode?", darkMode);
+            $scope.DarkMode = darkMode;
+
+            if($scope.DarkMode) {
+                document.getElementById('themeStylesheet').href = 'css/dark-mode.css';
+            } else {
+                document.getElementById('themeStylesheet').href = '';
+            }
+        }
+    };
 });
diff --git a/web/plates/js/settings.js b/web/plates/js/settings.js
@@ -8,7 +8,7 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
 	$scope.$parent.helppage = 'plates/settings-help.html';
 
 	var toggles = ['UAT_Enabled', 'ES_Enabled', 'Ping_Enabled', 'GPS_Enabled', 'IMU_Sensor_Enabled',
-		'BMP_Sensor_Enabled', 'DisplayTrafficSource', 'DEBUG', 'ReplayLog', 'AHRSLog'];
+		'BMP_Sensor_Enabled', 'DisplayTrafficSource', 'DEBUG', 'ReplayLog', 'AHRSLog', 'DarkMode'];
 	var settings = {};
 	for (var i = 0; i < toggles.length; i++) {
 		settings[toggles[i]] = undefined;
@@ -24,6 +24,9 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
 			$scope.Baud = settings.SerialOutputs['/dev/serialout0'].Baud;
 			$scope.visible_serialout = true;
 		}
+
+		$scope.DarkMode = settings.DarkMode;
+
 		$scope.UAT_Enabled = settings.UAT_Enabled;
 		$scope.ES_Enabled = settings.ES_Enabled;
 		$scope.Ping_Enabled = settings.Ping_Enabled;
@@ -50,6 +53,9 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
         $scope.WiFiSmartEnabled = settings.WiFiSmartEnabled;
 
         $scope.Channels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+		// Update theme
+		$scope.$parent.updateTheme($scope.DarkMode);
 	}
 
 	function getSettings() {