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"];
@@ -15,53 +14,71 @@
   function writeSettings() {
     require('Storage').writeJSON(LOC, appSettings);
   }
-
-  // Sync theme with current Bangle.js theme
-  function syncTheme() {
-    let sysSettings = require('Storage').readJSON(SYS, 1) || {};
-    appSettings.theme = sysSettings.theme && sysSettings.theme.dark ? 'dark' : 'light';
+  
+  // Colors from 'Ligh BW' and 'Dark BW' themes
+  function createThemeColors(mode) {
+    const cl = x => g.setColor(x).getColor();
+    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 = mode ? {
-      fg: cl("#fff"), bg: cl("#000"), fg2: cl("#0ff"), bg2: cl("#000"), 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
-    };
-    require("Storage").writeJSON("setting.json", s);
-    if (Bangle.CLOCK) load(global.__FILE__);
+    s.theme = createThemeColors(mode);
+    require("Storage").writeJSON(SYS, s);
+    updateTheme(mode);
+  }
+  
+  // Update the current menu with the new theme
+  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();
   }
 
-  // Sync theme before showing settings menu
-  syncTheme();
+  // Read the current system theme
+  function getCurrentTheme() {
+    let s = require("Storage").readJSON(SYS, 1) || {};
+    return s.theme.dark ? 'dark' : 'light';
+  }
 
-  // Show settings menu
-  E.showMenu({
-    "": {"title": "Shadow Clock"},
-    "< Back": () => back(),
-    'Theme:': {
-      value: (appSettings.theme === 'dark'),
-      format: v => v ? "Dark" : "Light",
-      onchange: v => {
-        const newTheme = v ? 'dark' : 'light';
-        switchTheme(newTheme === 'dark');
-        appSettings.theme = newTheme;
-        writeSettings();
-      }
-    },
-    'Color:': {
-      value: teletextColors.indexOf(appSettings.color),
-      min: 0,
-      max: 7,
-      onchange: v => {
-        appSettings.color = teletextColors[v];
-        writeSettings();
+  function showMenu() {
+    appSettings.theme = getCurrentTheme();
+    E.showMenu({
+      "": { "title": "Shadow Clock" },
+      "< Back": () => back(),
+      'Theme:': {
+        value: (appSettings.theme === 'dark'),
+        format: v => v ? "Dark" : "Light",
+        onchange: v => {
+          switchTheme(v);
+        }
       },
-      format: v => teletextColorNames[v]
-    }
-  });
-});
+      'Color:': {
+        value: teletextColors.indexOf(appSettings.color),
+        min: 0,
+        max: 7,
+        onchange: v => {
+          appSettings.color = teletextColors[v];
+          writeSettings();
+        },
+        format: v => teletextColorNames[v]
+      }
+    });
+  }
+  // Initially show the menu
+  showMenu();
+});