settings: customize theme

apps.json

@@ -185,7 +185,7 @@
   { "id": "setting",
     "name": "Settings",
     "icon": "settings.png",
-    "version":"0.28",
+    "version":"0.29",
     "description": "A menu for setting up Bangle.js",
     "tags": "tool,system,b2",
     "readme": "README.md",

apps/setting/ChangeLog

@@ -31,3 +31,4 @@
 0.26: Use Bangle.softOff if available as this keeps the time
 0.27: Add Theme menu
 0.28: Update Quiet Mode widget (if present)
+0.29: Add Customize to Theme menu

apps/setting/README.md

@@ -15,6 +15,7 @@ This is Bangle.js's settings menu
   * **NOTE:** on some platforms enabling HID can cause you problems when trying to connect to Bangle.js to upload apps.
 * **Set Time** Configure the current time - Note that this can be done much more easily by choosing 'Set Time' from the App Loader
 * **LCD** Configure settings about the screen. How long it stays on, how bright it is, and when it turns on - see below.
+* **Theme** Adjust the colour scheme
 * **Reset Settings** Reset the settings to defaults
 * **Turn Off** Turn Bangle.js off
 

apps/setting/settings.js

@@ -163,9 +163,8 @@ function showBLEMenu() {
   });
 }
 
-function showThemeMenu() {
-  function cl(x) { return g.setColor(x).getColor(); }
-  function upd(th) {
+let m;
+function updT(th) {
   g.theme = th;
   settings.theme = th;
   updateSettings();
@@ -176,10 +175,13 @@ function showThemeMenu() {
   g.clear(1);
   Bangle.drawWidgets();
   m.draw();
-  }
-  var m = E.showMenu({
+}
+function showThemeMenu() {
+  function cl(x) { return g.setColor(x).getColor(); }
+  m = E.showMenu({
+    '':{title:'Theme'},
     'Dark BW': ()=>{
-      upd({
+      updT({
         fg:cl("#fff"), bg:cl("#000"),
         fg2:cl("#0ff"), bg2:cl("#000"),
         fgH:cl("#fff"), bgH:cl("#00f"),
@@ -187,16 +189,69 @@ function showThemeMenu() {
       });
     },
     'Light BW': ()=>{
-      upd({
+      updT({
         fg:cl("#000"), bg:cl("#fff"),
         fg2:cl("#00f"), bg2:cl("#0ff"),
         fgH:cl("#000"), bgH:cl("#0ff"),
         dark:false
       });
     },
-    '< Back': ()=>showMainMenu()
+    'Customize': ()=>showCustomThemeMenu(),
+    '< Back': ()=>{delete m;showMainMenu();},
   });
 }
+function showCustomThemeMenu() {
+  function cv(x) { return g.setColor(x).getColor(); }
+  function setT(t, v) {
+    let th = g.theme;
+    th[t] = v;
+    if (t==="bg") {
+      th['dark'] = (v===cv("#000"));
+    }
+    updT(th);
+  }
+  const rgb = {
+    black: "#000", white: "#fff",
+    red: "#f00", green: "#0f0", blue: "#00f",
+    cyan: "#0ff", magenta: "#f0f", yellow: "#ff0", 
+  };
+  let colors = [], names = [];
+  for(const c in rgb) {
+    names.push(c);
+    colors.push(cv(rgb[c]));
+  }
+  function cn(v) {
+    const i = colors.indexOf(v);
+    return i!== -1 ? names[i] : v; // another color: just show value
+  }
+  let menu = {'':{title:'Customize Theme'}};
+  const labels = {
+    fg: 'Foreground', bg: 'Background',
+    fg2: 'Foreground 2', bg2: 'Background 2',
+    fgH: 'Highlight FG', bgH: 'Highlight BG',
+  };
+  ["fg", "bg", "fg2", "bg2", "fgH", "bgH"].forEach(t => {
+    menu[labels[t]] = {
+        value: colors.indexOf(g.theme[t]),
+        format: () => cn(g.theme[t]),
+        onchange: function(v) {
+          // wrap around
+          if (v>=colors.length) {v = 0;}
+          if (v<0) {v = colors.length-1;}
+          this.value = v;
+          const c = colors[v];
+          // if we select the same fg and bg: set the other to the old color
+          // e.g. bg=black;fg=white, user selects fg=black -> bg changes to white automatically
+          // so users don't end up with a black-on-black menu
+          if (t === 'fg' && g.theme.bg === c) setT('bg', g.theme.fg);
+          if (t === 'bg' && g.theme.fg === c) setT('fg', g.theme.bg);
+          setT(t, c);
+        },
+      };
+  });
+  menu["< Back"] = () => {delete m;showThemeMenu();};
+  m = E.showMenu(menu);
+}
 
 function showPasskeyMenu() {
   var menu = {