iNavFlight · bfmvsa · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024
diff --git a/images/cf_logo_black.svg b/images/cf_logo_black.svg
diff --git a/images/cf_logo_white.svg b/images/cf_logo_white.svg
diff --git a/images/icons/cf_failsafe_procedure1.svg b/images/icons/cf_failsafe_procedure1.svg
diff --git a/images/icons/cf_failsafe_procedure2.svg b/images/icons/cf_failsafe_procedure2.svg
diff --git a/images/icons/cf_failsafe_procedure3.svg b/images/icons/cf_failsafe_procedure3.svg
diff --git a/images/icons/cf_failsafe_procedure4.svg b/images/icons/cf_failsafe_procedure4.svg
diff --git a/images/map_bg.svg b/images/map_bg.svg
diff --git a/index.html b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html data-inav-theme="light">
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link type="text/css" rel="stylesheet" href="./src/css/styles.css" media="all" />    
+    <link type="text/css" rel="stylesheet" href="./src/css/styles.css" media="all" />
     <script type="text/javascript">require('./js/configurator_main.js');</script>
     <!-- TODO: Update to newer Versions and use proper modules (require) -->
     <script type="text/javascript" src="./js/libraries/three/three.min.js"></script>
@@ -28,7 +28,7 @@ <h1 class="modal__title modal__title" data-i18n="appUpdateNotificationHeader"></
                     data-i18n="closeUpdateBtn"></a>
             </div>
         </div>
-        <div class="headerbar">
+        <div class="headerbar" data-inav-theme="dark" >
             <div id="logo">
                 <div class="logo_text">
                     <span i18n="mainLogoText"></span>
@@ -175,12 +175,14 @@ <h1 class="modal__title modal__title" data-i18n="appUpdateNotificationHeader"></
             </div>
         </div>
         <div class="clear-both"></div>
-        <div id="log">
-            <div class="logswitch">
-                <a href="#" id="showlog" i18n="mainShowLog"></a>
+        <div data-inav-theme="dark" style="background: var(--inav-body-bg)">
+            <div id="log" >
+                <div class="logswitch">
+                    <a href="#" id="showlog" i18n="mainShowLog"></a>
+                </div>
+                <div id="scrollicon"></div>
+                <div class="wrapper"></div>
             </div>
-            <div id="scrollicon"></div>
-            <div class="wrapper"></div>
         </div>
         <div id="view-groundstation" style="display: none;">
             <div id="groundstation-telemetry">
@@ -225,7 +227,7 @@ <h2 class="groundstation-telemetry__header" data-i18n="gsTelemetry"></h2>
             </div>
             <div id="groundstation-map"></div>
         </div>
-        <div class="tab_container">
+        <div class="tab_container" data-inav-theme="dark">
             <div id="tabs">
                 <ul class="mode-disconnected">
                     <li class="tab_landing">
@@ -362,7 +364,7 @@ <h2 class="groundstation-telemetry__header" data-i18n="gsTelemetry"></h2>
         </div>
     </div>
     <div id="modal-reconnect" class="is-hidden">
-        <div data-i18n="deviceRebooting">Device - <span style="color: red">Rebooting</span></div>
+        <div data-i18n="deviceRebooting">Device - <span style="color: var(--inav-danger)">Rebooting</span></div>
     </div>
     <div id="modal-saving-defaults" class="is-hidden">
         <div data-i18n="savingDefaults"></div>

diff --git a/js/configurator_main.js b/js/configurator_main.js
@@ -6,6 +6,7 @@ window.$ = window.jQuery =  require('jquery'),
                             require('./libraries/jquery.ba-throttle-debounce');
 
 const { app } = require('@electron/remote');
+const darkMode = require('./darkMode');
 const d3 = require('./libraries/d3.min');
 const Store = require('electron-store');
 const store = new Store();
@@ -40,6 +41,7 @@ process.on('uncaughtException', function (error) {
 
 // Set how the units render on the configurator only
 $(function() {
+    darkMode.init();
     i18n.init( () => {
         i18n.localize();
 
@@ -299,6 +301,9 @@ $(function() {
                 el.after('<div id="options-window"></div>');
 
                 $('div#options-window').load('./tabs/options.html', function () {
+                    // Set current value of configurator theme
+                    darkMode.setConfiguratorTheme(darkMode.getPreferredTheme());
+                    document.getElementById('options-window').setAttribute('data-inav-theme', darkMode.getPreferredTheme())
 
                     // translate to user-selected language
                     i18n.localize();
@@ -372,6 +377,10 @@ $(function() {
                         activeTab.removeClass('active');
                         activeTab.find('a').trigger( "click" );
                     });
+                    $('#configurator-theme-select').on('change', function () {
+                        darkMode.setConfiguratorTheme($(this).val());
+                        document.getElementById('options-window').setAttribute('data-inav-theme', darkMode.getPreferredTheme())
+                    });
                     $('#map-provider-type').on('change', function () {
                         store.set('map_provider_type', $(this).val());
                         globalSettings.mapProviderType = $(this).val();

diff --git a/js/darkMode.js b/js/darkMode.js
@@ -0,0 +1,66 @@
+'use strict';
+
+const darkMode = {};
+
+function getPreferredTheme() {
+    const storedTheme = localStorage.getItem('theme')
+    if (storedTheme) {
+        return storedTheme
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function setTheme(theme) {
+    if (theme === 'auto') {
+        document.documentElement.setAttribute('data-inav-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+        document.documentElement.setAttribute('data-inav-theme', theme)
+    }
+}
+
+function showActiveTheme(theme) {
+    console.log(
+        'showActiveTheme'
+    )
+    const themeSwitcher = document.getElementById('configurator-theme-select')
+    console.log('configurator-theme-select', theme, themeSwitcher)
+    if (!themeSwitcher) {
+        return
+    }
+    themeSwitcher.value = theme
+}
+
+function setConfiguratorTheme(theme) {
+    localStorage.setItem('theme', theme)
+    setTheme(theme)
+    showActiveTheme(theme)
+}
+
+darkMode.init = function () {
+    // setTheme(getPreferredTheme())
+    setConfiguratorTheme(getPreferredTheme())
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const storedTheme = localStorage.getItem('theme')
+        if (storedTheme !== 'light' && storedTheme !== 'dark') {
+            setTheme(getPreferredTheme())
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(getPreferredTheme())
+        document.getElementById('configurator-theme-select').addEventListener('change', (event) => {
+            setConfiguratorTheme(event.target.value)
+        })
+    })
+}
+
+darkMode.getPreferredTheme = function () {
+    return getPreferredTheme();
+}
+
+darkMode.setConfiguratorTheme = function (theme) {
+    setConfiguratorTheme(theme)
+}
+
+module.exports = darkMode