From c1db20320550619d55a748271ae0f68a6af06b38 Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Tue, 15 Feb 2022 15:07:11 +0000
Subject: [PATCH] settings 0.42: Fix theme customizer on new Bangle 2 firmware

---
 apps/setting/ChangeLog     |  1 +
 apps/setting/metadata.json |  2 +-
 apps/setting/settings.js   | 20 ++++++--------------
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/apps/setting/ChangeLog b/apps/setting/ChangeLog
index 77c7b2040..39b4897b8 100644
--- a/apps/setting/ChangeLog
+++ b/apps/setting/ChangeLog
@@ -44,3 +44,4 @@
 0.39: Fix misbehaving debug info option
 0.40: Moved off into Utils, put System after Apps
 0.41: Stop users disabling all wake-up methods and locking themselves out (fix #1272)
+0.42: Fix theme customizer on new Bangle 2 firmware
diff --git a/apps/setting/metadata.json b/apps/setting/metadata.json
index 1e82f97b4..4bb5ec129 100644
--- a/apps/setting/metadata.json
+++ b/apps/setting/metadata.json
@@ -1,7 +1,7 @@
 {
   "id": "setting",
   "name": "Settings",
-  "version": "0.41",
+  "version": "0.42",
   "description": "A menu for setting up Bangle.js",
   "icon": "settings.png",
   "tags": "tool,system",
diff --git a/apps/setting/settings.js b/apps/setting/settings.js
index 9bd63491f..09d95934f 100644
--- a/apps/setting/settings.js
+++ b/apps/setting/settings.js
@@ -243,12 +243,11 @@ function showThemeMenu() {
   });
 
   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"));
+        th['dark'] = (v===cl("#000"));
       }
       upd(th);
     }
@@ -260,11 +259,7 @@ function showThemeMenu() {
     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
+      colors.push(cl(rgb[c]));
     }
     let menu = {
       '':{title:'Custom Theme'},
@@ -277,14 +272,11 @@ function showThemeMenu() {
     };
     ["fg", "bg", "fg2", "bg2", "fgH", "bgH"].forEach(t => {
       menu[labels[t]] = {
-          value: colors.indexOf(g.theme[t]),
-          format: () => cn(g.theme[t]),
+          min : 0, max : colors.length-1, wrap : true,
+          value: Math.max(colors.indexOf(g.theme[t]),0),
+          format: v => names[v],
           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];
+            var 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