diff --git a/main/gen_gdl90.go b/main/gen_gdl90.go index 659d9e21..44d07066 100644 --- a/main/gen_gdl90.go +++ b/main/gen_gdl90.go @@ -1103,6 +1103,7 @@ func getProductNameFromId(product_id int) string { } type settings struct { + DarkMode bool UAT_Enabled bool ES_Enabled bool Ping_Enabled bool @@ -1186,6 +1187,7 @@ var globalSettings settings var globalStatus status func defaultSettings() { + globalSettings.DarkMode = false globalSettings.UAT_Enabled = true globalSettings.ES_Enabled = true globalSettings.GPS_Enabled = true diff --git a/main/managementinterface.go b/main/managementinterface.go index 166af0fd..e4efe316 100644 --- a/main/managementinterface.go +++ b/main/managementinterface.go @@ -271,6 +271,8 @@ func handleSettingsSetRequest(w http.ResponseWriter, r *http.Request) { for key, val := range msg { // log.Printf("handleSettingsSetRequest:json: testing for key:%s of type %s\n", key, reflect.TypeOf(val)) switch key { + case "DarkMode": + globalSettings.DarkMode = val.(bool) case "UAT_Enabled": globalSettings.UAT_Enabled = val.(bool) case "ES_Enabled": diff --git a/web/css/dark-mode.css b/web/css/dark-mode.css new file mode 100644 index 00000000..ef5542bb --- /dev/null +++ b/web/css/dark-mode.css @@ -0,0 +1,184 @@ +pre { + color: #9b9b9b; +} + +.app-body, +.panel-default, +.scrollable-content, +.form-group { + color: #9b9b9b; + background-color: #121212; +} + +.help-page { + background-color: #121212; +} + +a, +.btn, +.navbar-app .btn { + color: #1e88e5; +} + +a:hover, +a:focus, +.btn:hover, +.btn:focus, +.navbar-app .btn:hover, +.navbar-app .btn:focus { + color: #42a5f5; +} + +.btn-primary { + color: #121212; + background-color: #1e88e5; + border-color: #1e88e5; +} + +.btn-primary:hover { + color: #121212; + background-color: #42a5f5; + border-color: #42a5f5; +} + +.btn-default { + color: #e0e0e0; + background-color: #343434; +} + +.btn-default:hover { + background-color: #383838; +} + +a.list-group-item, +.list-group-item { + color: #e0e0e0; + border-color: #373737; + background-color: #242424; +} + +a.list-group-item:hover, +.list-group-item:hover { + text-decoration: none; + color: #e0e0e0; + background-color: #373737; +} + +.list-group-item.active, +.list-group-item.active:focus, +.list-group-item.active:hover { + color: #121212; + background-color: #1e88e5; + border-color: #1e88e5; +} + +.navbar-app { + background-color: #2d2d2d; + border-color: #373737; +} + +.panel { + border-color: #373737; +} + +.panel-default>.panel-heading { + color: #e0e0e0; + background-color: #2d2d2d; + border-color: #373737; +} + +.panel-default>.panel-footer { + color: #e0e0e0; + background-color: #2d2d2d; + border-color: #373737; +} + +.row-header { + background-color: #212121; +} + +.separator { + border-bottom-color: #2d2d2d; +} + +.sidebar-header, +.app-name { + color: #e0e0e0; + background-color: #2d2d2d; + border-color: #373737; +} + +.switch { + background-color: #2d2d2d; + border-color: #9b9b9b; +} + +.switch .switch-handle { + background-color: #9b9b9b; + border-color: #9b9b9b; +} + +.switch.active { + background-color: #1e88e5; + border-color: #1e88e5; +} + +.text-primary { + color: #1e88e5; +} + +.label-success { + color: #121212; + background-color: #4caf50; +} + +.label-warning { + color: #121212; + background-color: #ffeb3b; +} + +.label-danger { + color: #121212; + background-color: #f44336; +} + +/* Input changes */ +input[type=text], +input[type=number] { + color: #e0e0e0; + background-color: #212121; + border: 2px solid #2d2d2d; + border-radius: 4px; +} + +input.ng-invalid:not(.grayout) { + color: #121212; +} + +select { + color: #e0e0e0; + background-color: #212121; + border: 2px solid #2d2d2d; + border-radius: 4px; +} + +/* Modal changes */ +.modal-content { + background-color: #343434; +} + +.modal-header { + border-color: #9b9b9b; +} + +.modal-title { + color: #e0e0e0; +} + +.modal-body { + color: #9b9b9b; +} + +.modal-footer { + border-color: #9b9b9b; +} \ No newline at end of file diff --git a/web/css/main.css b/web/css/main.css index cb783570..7786bfb7 100644 --- a/web/css/main.css +++ b/web/css/main.css @@ -262,6 +262,9 @@ width: 100%; } +.row-header { + background-color: #f7f7f7; +} /* *************************************************************************** everything below this comment represents tweaks to the mobile-angular-uis CSS diff --git a/web/index.html b/web/index.html index 66e17266..87b342a7 100644 --- a/web/index.html +++ b/web/index.html @@ -50,6 +50,7 @@ + diff --git a/web/js/main.js b/web/js/main.js index bf62e8b0..3a263955 100755 --- 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 index 48cac472..210a42d6 100644 --- 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() { diff --git a/web/plates/settings.html b/web/plates/settings.html index faad5613..6ff5f414 100644 --- a/web/plates/settings.html +++ b/web/plates/settings.html @@ -56,6 +56,21 @@ + +
+
+
Theme
+
+ +
+ +
+ +
+
+
+
+
diff --git a/web/plates/status.html b/web/plates/status.html index 94319688..86b373af 100644 --- a/web/plates/status.html +++ b/web/plates/status.html @@ -56,10 +56,10 @@
- Towers - METARS - TAFS - NEXRAD + Towers + METARS + TAFS + NEXRAD
@@ -72,10 +72,10 @@
- PIREP - SIGMET - NOTAMS - Other + PIREP + SIGMET + NOTAMS + Other