change menu to match theme switching from settings

apps/shadowclk/settings.js

@@ -1,5 +1,4 @@
 (function (back) {
-  // Constants
   const LOC = "shadowclk.json";
   const SYS = "setting.json";
   const teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"];
@@ -16,41 +15,56 @@
     require('Storage').writeJSON(LOC, appSettings);
   }
   
-  // Sync theme with current Bangle.js theme
+  // Colors from 'Ligh BW' and 'Dark BW' themes
-  function syncTheme() {
+  function createThemeColors(mode) {
-    let sysSettings = require('Storage').readJSON(SYS, 1) || {};
+    const cl = x => g.setColor(x).getColor();
-    appSettings.theme = sysSettings.theme && sysSettings.theme.dark ? 'dark' : 'light';
+    return mode ? {
+      fg: cl("#fff"), bg: cl("#000"), fg2: cl("#fff"), bg2: cl("#004"), fgH: cl("#fff"), bgH: cl("#00f"), dark: true
+    } : {
+      fg: cl("#000"), bg: cl("#fff"), fg2: cl("#000"), bg2: cl("#cff"), fgH: cl("#000"), bgH: cl("#0ff"), dark: false
+    };
   }
 
   // Switch theme and save to storage
   function switchTheme(mode) {
     if (mode === g.theme.dark) return;
     let s = require("Storage").readJSON(SYS, 1) || {};
-    const cl = x => g.setColor(x).getColor();
+    s.theme = createThemeColors(mode);
-    s.theme = mode ? {
+    require("Storage").writeJSON(SYS, s);
-      fg: cl("#fff"), bg: cl("#000"), fg2: cl("#0ff"), bg2: cl("#000"), fgH: cl("#fff"), bgH: cl("#00f"), dark: true
+    updateTheme(mode);
-    } : {
-      fg: cl("#000"), bg: cl("#fff"), fg2: cl("#000"), bg2: cl("#cff"), fgH: cl("#000"), bgH: cl("#0ff"), dark: false
-    };
-    require("Storage").writeJSON("setting.json", s);
-    if (Bangle.CLOCK) load(global.__FILE__);
   }
   
-  // Sync theme before showing settings menu
+  // Update the current menu with the new theme
-  syncTheme();
+  function updateTheme(mode) {
+    let newTheme = createThemeColors(mode);
+    g.theme = newTheme;
+    appSettings.theme = mode ? 'dark' : 'light';
+    writeSettings();
+    delete g.reset;
+    g._reset = g.reset;
+    g.reset = function (n) { return g._reset().setColor(newTheme.fg).setBgColor(newTheme.bg); };
+    g.clear = function (n) { if (n) g.reset(); return g.clearRect(0, 0, g.getWidth(), g.getHeight()); };
+    g.clear(1);
+    Bangle.drawWidgets();
+    showMenu();
+  }
 
-  // Show settings menu
+  // Read the current system theme
+  function getCurrentTheme() {
+    let s = require("Storage").readJSON(SYS, 1) || {};
+    return s.theme.dark ? 'dark' : 'light';
+  }
+
+  function showMenu() {
+    appSettings.theme = getCurrentTheme();
     E.showMenu({
-    "": {"title": "Shadow Clock"},
+      "": { "title": "Shadow Clock" },
       "< Back": () => back(),
       'Theme:': {
         value: (appSettings.theme === 'dark'),
         format: v => v ? "Dark" : "Light",
         onchange: v => {
-        const newTheme = v ? 'dark' : 'light';
+          switchTheme(v);
-        switchTheme(newTheme === 'dark');
-        appSettings.theme = newTheme;
-        writeSettings();
         }
       },
       'Color:': {
@@ -64,4 +78,7 @@
         format: v => teletextColorNames[v]
       }
     });
+  }
+  // Initially show the menu
+  showMenu();
 });