Working, but need to store selection in localstorage

lnbits/extensions/copilot/templates/copilot/index.html

@@ -8,11 +8,6 @@
         <q-btn unelevated color="primary" @click="formDialogCopilot.show = true"
           >New copilot instance
         </q-btn>
-        <q-select
-          v-model="theme"
-          :options="theOptions"
-          label="Standard"
-        ></q-select>
       </q-card-section>
     </q-card>
 
@@ -465,16 +460,7 @@
           data: null
         },
         options: ['bitcoin', 'confetti', 'rocket', 'face', 'martijn', 'rick'],
-        currencyOptions: ['None', 'btcusd', 'btceur', 'btcgbp'],
-        theOptions: ['classic', 'dark', 'light', 'green'],
-        theme: ''
-      }
-    },
-    watch: {
-      theme(newValue) {
-        document.body.setAttribute('data-theme', newValue)
-        console.log(document.body.getAttribute('data-theme'))
-        console.log(newValue)
+        currencyOptions: ['None', 'btcusd', 'btceur', 'btcgbp']
       }
     },
     methods: {

lnbits/static/js/base.js

@@ -311,7 +311,13 @@ window.windowMixin = {
       }
     }
   },
+  
   methods: {
+    changeColor: function(newValue) {
+      document.body.setAttribute('data-theme', newValue)
+      console.log(document.body.getAttribute('data-theme'))
+      console.log(newValue)
+    },
     toggleDarkMode: function () {
       this.$q.dark.toggle()
       this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)

lnbits/static/scss/base.scss

@@ -7,22 +7,6 @@ $themes: (
     marginal-bg: #1f2234,
     marginal-text: #fff
   ),
-  'dark': (
-    primary: #3b2169,
-    secondary: #551561,
-    dark: #020203,
-    info: #15161d,
-    marginal-bg: #020203,
-    marginal-text: #fff
-  ),
-  'light': (
-    primary: #703ec7,
-    secondary: #a32cb8,
-    dark: #4c4c74,
-    info: #555974,
-    marginal-bg: #4c4c74,
-    marginal-text: #fff
-  ),
   'green': (
     primary: #3ab77d,
     secondary: #27b065,
@@ -30,6 +14,14 @@ $themes: (
     info: #334642,
     marginal-bg: #1f342b,
     marginal-text: #fff
+  ),
+  'orange': (
+    primary: #b7763a,
+    secondary: #b07927,
+    dark: #34291f,
+    info: #463f33,
+    marginal-bg: #342a1f,
+    marginal-text: rgb(255, 255, 255)
   )
 );
 

lnbits/templates/base.html

@@ -47,13 +47,51 @@
             >
           </q-badge>
           {% endblock %}
+          <q-btn-dropdown
+            dense
+            flat
+            round
+            size="sm"
+            icon="dashboard_customize"
+            class="q-pl-md"
+          >
+            <div class="row no-wrap q-pa-md">
+              <q-btn
+                dense
+                flat
+                @click="changeColor('classic')"
+                icon="format_color_fill"
+                color="deep-purple"
+                size="md"
+              >
+              </q-btn
+              ><q-btn
+                dense
+                flat
+                @click="changeColor('green')"
+                icon="format_color_fill"
+                color="green"
+                size="md"
+              >
+              </q-btn
+              ><q-btn
+                dense
+                flat
+                @click="changeColor('orange')"
+                icon="format_color_fill"
+                color="orange"
+                size="md"
+              >
+              </q-btn>
+            </div>
+          </q-btn-dropdown>
+
           <q-btn
             dense
             flat
             round
             @click="toggleDarkMode"
             :icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
-            class="q-ml-lg"
             size="sm"
           >
             <q-tooltip>Toggle Dark Mode</q-tooltip>