From 8f441f32b55a678bb41413bf2320c04814c99e16 Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Mon, 28 Jun 2021 22:57:23 +0100
Subject: [PATCH 01/11] added envs, testing color switch

---
 .env.example                                  |  9 ++-
 lnbits/commands.py                            |  8 ++-
 lnbits/core/static/js/wallet.js               |  3 +
 .../copilot/templates/copilot/index.html      | 21 ++++--
 lnbits/settings.py                            |  5 ++
 lnbits/static/scss/base.scss                  | 65 ++++++++++++++-----
 6 files changed, 86 insertions(+), 25 deletions(-)

diff --git a/.env.example b/.env.example
index cc70644c..392f848a 100644
--- a/.env.example
+++ b/.env.example
@@ -5,7 +5,7 @@ QUART_DEBUG=true
 HOST=127.0.0.1
 PORT=5000
 
-LNBITS_SITE_TITLE=LNbits
+
 LNBITS_ALLOWED_USERS=""
 LNBITS_DEFAULT_WALLET_NAME="LNbits wallet"
 LNBITS_DATA_FOLDER="./data"
@@ -13,6 +13,13 @@ LNBITS_DISABLED_EXTENSIONS="amilk"
 LNBITS_FORCE_HTTPS=true
 LNBITS_SERVICE_FEE="0.0"
 
+# Change theme
+LNBITS_SITE_TITLE=LNbits
+LNBITS_PRIMARY_COLOR="#673ab7"
+LNBITS_SECONDARY_COLOR="#9c27b0"
+LNBITS_BG_COLOR="#1f2234"
+LNBITS_DARKCARD_COLOR="#333646"
+
 # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC),
 #             LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet
 LNBITS_BACKEND_WALLET_CLASS=VoidWallet
diff --git a/lnbits/commands.py b/lnbits/commands.py
index 2e9b837f..b688e6e4 100644
--- a/lnbits/commands.py
+++ b/lnbits/commands.py
@@ -13,7 +13,13 @@ from .helpers import (
     get_js_vendored,
     url_for_vendored,
 )
-from .settings import LNBITS_PATH
+from .settings import (
+    LNBITS_PATH,
+    LNBITS_PRIMARY_COLOR,
+    LNBITS_SECONDARY_COLOR,
+    LNBITS_BG_COLOR,
+    LNBITS_DARKCARD_COLOR,
+)
 
 
 @click.command("migrate")
diff --git a/lnbits/core/static/js/wallet.js b/lnbits/core/static/js/wallet.js
index d0191051..e95525ab 100644
--- a/lnbits/core/static/js/wallet.js
+++ b/lnbits/core/static/js/wallet.js
@@ -111,6 +111,7 @@ new Vue({
   mixins: [windowMixin],
   data: function () {
     return {
+      
       user: LNbits.map.user(window.user),
       receive: {
         show: false,
@@ -622,6 +623,7 @@ new Vue({
     }
   },
   created: function () {
+    
     this.fetchBalance()
     this.fetchPayments()
 
@@ -635,6 +637,7 @@ new Vue({
       })
   },
   mounted: function () {
+    
     // show disclaimer
     if (
       this.$refs.disclaimer &&
diff --git a/lnbits/extensions/copilot/templates/copilot/index.html b/lnbits/extensions/copilot/templates/copilot/index.html
index 3cf71e75..1fda8e79 100644
--- a/lnbits/extensions/copilot/templates/copilot/index.html
+++ b/lnbits/extensions/copilot/templates/copilot/index.html
@@ -5,12 +5,14 @@
     <q-card>
       <q-card-section>
         {% raw %}
-        <q-btn
-          unelevated
-          color="deep-purple"
-          @click="formDialogCopilot.show = true"
+        <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>
 
@@ -463,7 +465,16 @@
           data: null
         },
         options: ['bitcoin', 'confetti', 'rocket', 'face', 'martijn', 'rick'],
-        currencyOptions: ['None', 'btcusd', 'btceur', 'btcgbp']
+        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)
       }
     },
     methods: {
diff --git a/lnbits/settings.py b/lnbits/settings.py
index b42d06ec..cf1c29d7 100644
--- a/lnbits/settings.py
+++ b/lnbits/settings.py
@@ -29,7 +29,12 @@ LNBITS_ALLOWED_USERS: List[str] = env.list(
 LNBITS_DISABLED_EXTENSIONS: List[str] = env.list(
     "LNBITS_DISABLED_EXTENSIONS", default=[], subcast=str
 )
+
 LNBITS_SITE_TITLE = env.str("LNBITS_SITE_TITLE", default="LNbits")
+LNBITS_PRIMARY_COLOR = env.str("LNBITS_PRIMARY_COLOR", default="#673ab7")
+LNBITS_SECONDARY_COLOR = env.str("LNBITS_SECONDARY_COLOR", default="#9c27b0")
+LNBITS_BG_COLOR = env.str("LNBITS_BG_COLOR", default="#1f2234")
+LNBITS_DARKCARD_COLOR = env.str("LNBITS_DARKCARD_COLOR", default="#333646")
 
 WALLET = wallet_class()
 DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet")
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 2af63bab..df2a178c 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -1,31 +1,60 @@
-$dark-background: #1f2234;
-$dark-card-background: #333646;
-
+$themes: (
+  'classic': (
+    primary: #673ab7,
+    secondary: #9c27b0,
+    dark: #1f2234,
+    info: #333646,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  ),
+  'dark': (
+    primary: #3b2169,
+    secondary: #551561,
+    dark: #020203,
+    info: #15161d,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  ),
+  'light': (
+    primary: #703ec7,
+    secondary: #a32cb8,
+    dark: #4c4c74,
+    info: #555974,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  ),
+  'green': (
+    primary: #3ab77d,
+    secondary: #27b065,
+    dark: #1f342b,
+    info: #334642,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  )
+);
+@each $theme, $colors in $themes {
+  [data-theme='#{$theme}'] {
+    @each $name, $color in $colors {
+      .bg-#{$name} {
+        background: $color !important;
+      }
+      .text-#{$name} {
+        color: $color !important;
+      }
+    }
+  }
+}
 
 [v-cloak] {
   display: none;
 }
 
-.bg-lnbits-dark {
-  background-color: $dark-background;
-}
-
-body.body--dark,
-body.body--dark .q-drawer--dark,
-body.body--dark .q-menu--dark {
-  background: $dark-background;
-}
-
-body.body--dark .q-card--dark {
-  background: $dark-card-background;
-}
-
 body.body--dark .q-table--dark {
   background: transparent;
 }
 
 body.body--light,
-body.body--light .q-drawer  {
+body.body--light .q-drawer {
   background: whitesmoke;
 }
 

From c39dfbaee2cd27c799cea48630c87852d110713c Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Tue, 29 Jun 2021 01:19:35 +0100
Subject: [PATCH 02/11] Kinda working test

---
 lnbits/static/scss/base.scss | 26 ++++++++++++++++++--------
 lnbits/templates/base.html   |  5 +++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index df2a178c..d65c0c4f 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -12,7 +12,7 @@ $themes: (
     secondary: #551561,
     dark: #020203,
     info: #15161d,
-    marginal-bg: #1f2234,
+    marginal-bg: #020203,
     marginal-text: #fff
   ),
   'light': (
@@ -20,7 +20,7 @@ $themes: (
     secondary: #a32cb8,
     dark: #4c4c74,
     info: #555974,
-    marginal-bg: #1f2234,
+    marginal-bg: #4c4c74,
     marginal-text: #fff
   ),
   'green': (
@@ -28,11 +28,26 @@ $themes: (
     secondary: #27b065,
     dark: #1f342b,
     info: #334642,
-    marginal-bg: #1f2234,
+    marginal-bg: #1f342b,
     marginal-text: #fff
   )
 );
+
 @each $theme, $colors in $themes {
+  @each $name, $color in $colors {
+    @if $name == 'dark' {
+      body.body--dark [data-theme='#{$theme}'],
+      [data-theme='#{$theme}'] .q-drawer--dark,
+      [data-theme='#{$theme}'] .q-menu--dark {
+        background: $color !important;
+      }
+    }
+    @if $name == 'info' {
+      [data-theme='#{$theme}'] .q-card--dark {
+        background: $color !important;
+      }
+    }
+  }
   [data-theme='#{$theme}'] {
     @each $name, $color in $colors {
       .bg-#{$name} {
@@ -53,11 +68,6 @@ body.body--dark .q-table--dark {
   background: transparent;
 }
 
-body.body--light,
-body.body--light .q-drawer {
-  background: whitesmoke;
-}
-
 body.body--dark .q-field--error {
   .text-negative,
   .q-field__messages {
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 1e39b608..6ac09382 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -7,6 +7,7 @@
     {% endfor %}
     <!---->
     <link rel="stylesheet" type="text/css" href="/static/css/base.css" />
+
     {% block styles %}{% endblock %}
     <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
     <meta charset="utf-8" />
@@ -21,7 +22,7 @@
 
   <body>
     <q-layout id="vue" view="hHh lpR lfr" v-cloak>
-      <q-header bordered class="bg-lnbits-dark">
+      <q-header bordered class="bg-marginal-bg">
         <q-toolbar>
           {% block drawer_toggle %}
           <q-btn
@@ -93,7 +94,7 @@
           <q-btn
             flat
             dense
-            :color="($q.dark.isActive) ? 'white' : 'deep-purple'"
+            :color="($q.dark.isActive) ? 'white' : 'primary'"
             icon="code"
             type="a"
             href="https://github.com/lnbits/lnbits"

From b0c0b9f851153d5463efe33ee1c218e71b0bb972 Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Tue, 29 Jun 2021 02:10:30 +0100
Subject: [PATCH 03/11] Changed primary/secondary colours to branded

---
 lnbits/core/templates/core/extensions.html    |  4 ++--
 lnbits/core/templates/core/index.html         | 11 +++++++---
 lnbits/core/templates/core/wallet.html        | 20 +++++++++----------
 .../amilk/templates/amilk/index.html          |  4 ++--
 .../bleskomat/templates/bleskomat/index.html  |  6 +++---
 .../captcha/templates/captcha/display.html    |  2 +-
 .../captcha/templates/captcha/index.html      |  6 +++---
 .../copilot/templates/copilot/index.html      |  4 ++--
 .../templates/diagonalley/index.html          | 12 +++++------
 .../events/templates/events/display.html      |  4 ++--
 .../events/templates/events/index.html        |  6 +++---
 .../events/templates/events/register.html     |  2 +-
 .../templates/livestream/index.html           |  8 ++++----
 .../lnticket/templates/lnticket/display.html  |  2 +-
 .../lnticket/templates/lnticket/index.html    |  6 +++---
 .../lnurlp/templates/lnurlp/index.html        |  6 +++---
 .../templates/offlineshop/index.html          | 12 +++++------
 .../paywall/templates/paywall/display.html    |  2 +-
 .../paywall/templates/paywall/index.html      |  6 +++---
 .../satspay/templates/satspay/index.html      |  7 ++-----
 .../templates/splitpayments/index.html        |  4 ++--
 .../templates/subdomains/display.html         |  2 +-
 .../templates/subdomains/index.html           |  6 +++---
 .../extensions/tpos/templates/tpos/index.html |  4 ++--
 .../templates/usermanager/index.html          |  8 ++++----
 .../watchonly/templates/watchonly/index.html  |  6 +++---
 .../withdraw/templates/withdraw/index.html    | 17 +++++++---------
 lnbits/static/js/components.js                |  4 ++--
 lnbits/static/scss/base.scss                  |  2 +-
 29 files changed, 90 insertions(+), 93 deletions(-)

diff --git a/lnbits/core/templates/core/extensions.html b/lnbits/core/templates/core/extensions.html
index ced46ee1..daeb660f 100644
--- a/lnbits/core/templates/core/extensions.html
+++ b/lnbits/core/templates/core/extensions.html
@@ -24,7 +24,7 @@
         <div v-if="extension.isEnabled">
           <q-btn
             flat
-            color="deep-purple"
+            color="primary"
             type="a"
             :href="[extension.url, '?usr=', g.user.id].join('')"
             >Open</q-btn
@@ -41,7 +41,7 @@
         <q-btn
           v-else
           flat
-          color="deep-purple"
+          color="primary"
           type="a"
           :href="['{{ url_for('core.extensions') }}', '?usr=', g.user.id, '&enable=', extension.code].join('')"
         >
diff --git a/lnbits/core/templates/core/index.html b/lnbits/core/templates/core/index.html
index 7ca61a3a..14842e92 100644
--- a/lnbits/core/templates/core/index.html
+++ b/lnbits/core/templates/core/index.html
@@ -8,7 +8,7 @@
         {% if lnurl %}
         <q-btn
           unelevated
-          color="deep-purple"
+          color="primary"
           @click="processing"
           type="a"
           href="{{ url_for('core.lnurlwallet', lightning=lnurl) }}"
@@ -25,7 +25,7 @@
           ></q-input>
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="walletName == ''"
             type="submit"
             >Add a new wallet</q-btn
@@ -88,7 +88,12 @@
   <div class="col-12 col-md-3 col-lg-3">
     <div class="row q-col-gutter-lg justify-center">
       <div class="col-6 col-sm-4 col-md-8 q-gutter-y-sm">
-        <q-btn flat color="purple" label="Runs on" class="full-width"></q-btn>
+        <q-btn
+          flat
+          color="secondary"
+          label="Runs on"
+          class="full-width"
+        ></q-btn>
         <div class="row">
           <div class="col">
             <a href="https://github.com/ElementsProject/lightning">
diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index d127b6f9..2856f253 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -22,7 +22,7 @@
         <div class="col">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             class="full-width"
             @click="showParseDialog"
             >Paste Request</q-btn
@@ -31,7 +31,7 @@
         <div class="col">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             class="full-width"
             @click="showReceiveDialog"
             >Create Invoice</q-btn
@@ -40,7 +40,7 @@
         <div class="col">
           <q-btn
             unelevated
-            color="purple"
+            color="secondary"
             icon="photo_camera"
             @click="showCamera"
             >scan
@@ -342,7 +342,7 @@
       <div v-if="receive.status == 'pending'" class="row q-mt-lg">
         <q-btn
           unelevated
-          color="deep-purple"
+          color="primary"
           :disable="receive.data.memo == null || receive.data.amount == null || receive.data.amount <= 0"
           type="submit"
         >
@@ -355,7 +355,7 @@
       </div>
       <q-spinner
         v-if="receive.status == 'loading'"
-        color="deep-purple"
+        color="primary"
         size="2.55em"
       ></q-spinner>
     </q-form>
@@ -395,7 +395,7 @@
       </p>
       {% endraw %}
       <div v-if="canPay" class="row q-mt-lg">
-        <q-btn unelevated color="deep-purple" @click="payInvoice">Pay</q-btn>
+        <q-btn unelevated color="primary" @click="payInvoice">Pay</q-btn>
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
       </div>
       <div v-else class="row q-mt-lg">
@@ -423,7 +423,7 @@
           <code class="text-wrap"> {{ parse.lnurlauth.pubkey }} </code>
         </p>
         <div class="row q-mt-lg">
-          <q-btn unelevated color="deep-purple" type="submit">Login</q-btn>
+          <q-btn unelevated color="primary" type="submit">Login</q-btn>
           <q-btn v-close-popup flat color="grey" class="q-ml-auto"
             >Cancel</q-btn
           >
@@ -485,9 +485,7 @@
           </div>
         </div>
         <div class="row q-mt-lg">
-          <q-btn unelevated color="deep-purple" type="submit"
-            >Send satoshis</q-btn
-          >
+          <q-btn unelevated color="primary" type="submit">Send satoshis</q-btn>
           <q-btn v-close-popup flat color="grey" class="q-ml-auto"
             >Cancel</q-btn
           >
@@ -512,7 +510,7 @@
         <div class="row q-mt-lg">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="parse.data.request == ''"
             type="submit"
             >Read</q-btn
diff --git a/lnbits/extensions/amilk/templates/amilk/index.html b/lnbits/extensions/amilk/templates/amilk/index.html
index 357dd885..bb332e27 100644
--- a/lnbits/extensions/amilk/templates/amilk/index.html
+++ b/lnbits/extensions/amilk/templates/amilk/index.html
@@ -4,7 +4,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="amilkDialog.show = true"
+        <q-btn unelevated color="primary" @click="amilkDialog.show = true"
           >New AMilk</q-btn
         >
       </q-card-section>
@@ -109,7 +109,7 @@
         ></q-input>
         <q-btn
           unelevated
-          color="deep-purple"
+          color="primary"
           :disable="amilkDialog.data.amount == null || amilkDialog.data.amount < 0 || amilkDialog.data.lnurl == null"
           type="submit"
           >Create amilk</q-btn
diff --git a/lnbits/extensions/bleskomat/templates/bleskomat/index.html b/lnbits/extensions/bleskomat/templates/bleskomat/index.html
index d00937c1..109626e3 100644
--- a/lnbits/extensions/bleskomat/templates/bleskomat/index.html
+++ b/lnbits/extensions/bleskomat/templates/bleskomat/index.html
@@ -11,7 +11,7 @@
   <div class="col-12 col-md-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >Add Bleskomat</q-btn
         >
       </q-card-section>
@@ -150,14 +150,14 @@
           <q-btn
             v-if="formDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update Bleskomat</q-btn
           >
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 formDialog.data.wallet == null ||
                 formDialog.data.name == null ||
diff --git a/lnbits/extensions/captcha/templates/captcha/display.html b/lnbits/extensions/captcha/templates/captcha/display.html
index 80e59e63..a96cae05 100644
--- a/lnbits/extensions/captcha/templates/captcha/display.html
+++ b/lnbits/extensions/captcha/templates/captcha/display.html
@@ -24,7 +24,7 @@
                   dense
                   flat
                   icon="check"
-                  color="deep-purple"
+                  color="primary"
                   type="submit"
                   @click="createInvoice"
                   :disabled="userAmount < captchaAmount || paymentReq"
diff --git a/lnbits/extensions/captcha/templates/captcha/index.html b/lnbits/extensions/captcha/templates/captcha/index.html
index 2250bced..d93a24f8 100644
--- a/lnbits/extensions/captcha/templates/captcha/index.html
+++ b/lnbits/extensions/captcha/templates/captcha/index.html
@@ -4,7 +4,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >New captcha</q-btn
         >
       </q-card-section>
@@ -141,7 +141,7 @@
             <q-item-section avatar>
               <q-checkbox
                 v-model="formDialog.data.remembers"
-                color="deep-purple"
+                color="primary"
               ></q-checkbox>
             </q-item-section>
             <q-item-section>
@@ -157,7 +157,7 @@
         <div class="row q-mt-lg">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="formDialog.data.amount == null || formDialog.data.amount < 0 || formDialog.data.memo == null"
             type="submit"
             >Create captcha</q-btn
diff --git a/lnbits/extensions/copilot/templates/copilot/index.html b/lnbits/extensions/copilot/templates/copilot/index.html
index 1fda8e79..accebff0 100644
--- a/lnbits/extensions/copilot/templates/copilot/index.html
+++ b/lnbits/extensions/copilot/templates/copilot/index.html
@@ -359,7 +359,7 @@
           <q-btn
             v-if="formDialogCopilot.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 formDialogCopilot.data.title == ''"
             type="submit"
@@ -368,7 +368,7 @@
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 formDialogCopilot.data.title == ''"
             type="submit"
diff --git a/lnbits/extensions/diagonalley/templates/diagonalley/index.html b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
index cdf9da53..c041239f 100644
--- a/lnbits/extensions/diagonalley/templates/diagonalley/index.html
+++ b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
@@ -4,10 +4,10 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="productDialog.show = true"
+        <q-btn unelevated color="primary" @click="productDialog.show = true"
           >New Product</q-btn
         >
-        <q-btn unelevated color="deep-purple" @click="indexerDialog.show = true"
+        <q-btn unelevated color="primary" @click="indexerDialog.show = true"
           >New Indexer
           <q-tooltip>
             Frontend shop your stall will list its products in
@@ -282,7 +282,7 @@
           <q-btn
             v-if="productDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update Product</q-btn
           >
@@ -290,7 +290,7 @@
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="productDialog.data.image == null
               || productDialog.data.product == null
               || productDialog.data.description == null
@@ -374,7 +374,7 @@
           <q-btn
             v-if="indexerDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update Indexer</q-btn
           >
@@ -382,7 +382,7 @@
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="indexerDialog.data.shopname == null
               || indexerDialog.data.shippingzone1 == null
               || indexerDialog.data.indexeraddress == null
diff --git a/lnbits/extensions/events/templates/events/display.html b/lnbits/extensions/events/templates/events/display.html
index be10b08c..4c1f557f 100644
--- a/lnbits/extensions/events/templates/events/display.html
+++ b/lnbits/extensions/events/templates/events/display.html
@@ -26,7 +26,7 @@
           <div class="row q-mt-lg">
             <q-btn
               unelevated
-              color="deep-purple"
+              color="primary"
               :disable="formDialog.data.name == '' || formDialog.data.email == '' || paymentReq"
               type="submit"
               >Submit</q-btn
@@ -46,7 +46,7 @@
           size="xl"
           :href="ticketLink.data.link"
           target="_blank"
-          color="deep-purple"
+          color="primary"
           type="a"
           >Link to your ticket!</q-btn
         >
diff --git a/lnbits/extensions/events/templates/events/index.html b/lnbits/extensions/events/templates/events/index.html
index 384cf630..5d3cc262 100644
--- a/lnbits/extensions/events/templates/events/index.html
+++ b/lnbits/extensions/events/templates/events/index.html
@@ -4,7 +4,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >New Event</q-btn
         >
       </q-card-section>
@@ -267,14 +267,14 @@
           <q-btn
             v-if="formDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update Event</q-btn
           >
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="formDialog.data.wallet == null || formDialog.data.name == null || formDialog.data.info == null || formDialog.data.closing_date == null || formDialog.data.event_start_date == null || formDialog.data.event_end_date == null || formDialog.data.amount_tickets == null || formDialog.data.price_per_ticket == null"
             type="submit"
             >Create Event</q-btn
diff --git a/lnbits/extensions/events/templates/events/register.html b/lnbits/extensions/events/templates/events/register.html
index b1a6a6c1..4dff9afb 100644
--- a/lnbits/extensions/events/templates/events/register.html
+++ b/lnbits/extensions/events/templates/events/register.html
@@ -10,7 +10,7 @@
 
           <br />
 
-          <q-btn unelevated color="deep-purple" @click="showCamera" size="xl"
+          <q-btn unelevated color="primary" @click="showCamera" size="xl"
             >Scan ticket</q-btn
           >
         </center>
diff --git a/lnbits/extensions/livestream/templates/livestream/index.html b/lnbits/extensions/livestream/templates/livestream/index.html
index e6585ac0..c6fc5b4a 100644
--- a/lnbits/extensions/livestream/templates/livestream/index.html
+++ b/lnbits/extensions/livestream/templates/livestream/index.html
@@ -26,7 +26,7 @@
           </div>
           <div class="col">
             {% raw %}
-            <q-btn unelevated color="deep-purple" type="submit">
+            <q-btn unelevated color="primary" type="submit">
               {{ nextCurrentTrack && nextCurrentTrack ===
               livestream.current_track ? 'Stop' : 'Set' }} current track
             </q-btn>
@@ -46,7 +46,7 @@
             ></q-input>
           </div>
           <div class="col">
-            <q-btn unelevated color="deep-purple" type="submit"
+            <q-btn unelevated color="primary" type="submit"
               >Set percent rate</q-btn
             >
           </div>
@@ -61,7 +61,7 @@
             <h5 class="text-subtitle1 q-my-none">Tracks</h5>
           </div>
           <div class="col q-ml-lg">
-            <q-btn unelevated color="deep-purple" @click="openAddTrackDialog"
+            <q-btn unelevated color="primary" @click="openAddTrackDialog"
               >Add new track</q-btn
             >
           </div>
@@ -296,7 +296,7 @@
             <div class="col q-ml-lg">
               <q-btn
                 unelevated
-                color="deep-purple"
+                color="primary"
                 :disable="disabledAddTrackButton()"
                 type="submit"
               >
diff --git a/lnbits/extensions/lnticket/templates/lnticket/display.html b/lnbits/extensions/lnticket/templates/lnticket/display.html
index b432ce9e..d570ad79 100644
--- a/lnbits/extensions/lnticket/templates/lnticket/display.html
+++ b/lnbits/extensions/lnticket/templates/lnticket/display.html
@@ -33,7 +33,7 @@
           <div class="row q-mt-lg">
             <q-btn
               unelevated
-              color="deep-purple"
+              color="primary"
               :disable="formDialog.data.name == '' || formDialog.data.text == ''"
               type="submit"
               >Submit</q-btn
diff --git a/lnbits/extensions/lnticket/templates/lnticket/index.html b/lnbits/extensions/lnticket/templates/lnticket/index.html
index d2ab7801..1c909f09 100644
--- a/lnbits/extensions/lnticket/templates/lnticket/index.html
+++ b/lnbits/extensions/lnticket/templates/lnticket/index.html
@@ -4,7 +4,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >New Form</q-btn
         >
       </q-card-section>
@@ -217,7 +217,7 @@
           <q-btn
             v-if="formDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update Form</q-btn
           >
@@ -225,7 +225,7 @@
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="formDialog.data.costpword == null || formDialog.data.costpword < 0 || formDialog.data.name == null"
             type="submit"
             >Create Form</q-btn
diff --git a/lnbits/extensions/lnurlp/templates/lnurlp/index.html b/lnbits/extensions/lnurlp/templates/lnurlp/index.html
index c7d60667..b168675e 100644
--- a/lnbits/extensions/lnurlp/templates/lnurlp/index.html
+++ b/lnbits/extensions/lnurlp/templates/lnurlp/index.html
@@ -4,7 +4,7 @@
   <div class="col-12 col-md-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >New pay link</q-btn
         >
       </q-card-section>
@@ -227,14 +227,14 @@
           <q-btn
             v-if="formDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update pay link</q-btn
           >
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 formDialog.data.wallet == null ||
                 formDialog.data.description == null ||
diff --git a/lnbits/extensions/offlineshop/templates/offlineshop/index.html b/lnbits/extensions/offlineshop/templates/offlineshop/index.html
index 1a388e92..e840f563 100644
--- a/lnbits/extensions/offlineshop/templates/offlineshop/index.html
+++ b/lnbits/extensions/offlineshop/templates/offlineshop/index.html
@@ -9,7 +9,7 @@
             <h5 class="text-subtitle1 q-my-none">Items</h5>
           </div>
           <div class="col q-ml-lg">
-            <q-btn unelevated color="deep-purple" @click="openNewDialog()"
+            <q-btn unelevated color="primary" @click="openNewDialog()"
               >Add new item</q-btn
             >
           </div>
@@ -111,7 +111,7 @@
           <q-btn
             type="a"
             outline
-            color="purple"
+            color="secondary"
             :href="'print?items=' + printItems.map(({id}) => id).join(',')"
             >Print QR Codes</q-btn
           >
@@ -151,7 +151,7 @@
             >
               <q-btn
                 unelevated
-                color="deep-purple"
+                color="primary"
                 type="submit"
                 :disabled="!wordlistTainted"
               >
@@ -180,7 +180,7 @@
             >
               <q-btn
                 unelevated
-                color="deep-purple"
+                color="primary"
                 :disabled="offlineshop.method === 'totp'"
                 @click="setMethod"
               >
@@ -199,7 +199,7 @@
 
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disabled="offlineshop.method === 'none'"
             @click="setMethod"
           >
@@ -308,7 +308,7 @@
             <div class="col q-ml-lg">
               <q-btn
                 unelevated
-                color="deep-purple"
+                color="primary"
                 :disable="disabledAddItemButton()"
                 type="submit"
               >
diff --git a/lnbits/extensions/paywall/templates/paywall/display.html b/lnbits/extensions/paywall/templates/paywall/display.html
index 391f4e84..7bc7d9b8 100644
--- a/lnbits/extensions/paywall/templates/paywall/display.html
+++ b/lnbits/extensions/paywall/templates/paywall/display.html
@@ -24,7 +24,7 @@
                   dense
                   flat
                   icon="check"
-                  color="deep-purple"
+                  color="primary"
                   type="submit"
                   @click="createInvoice"
                   :disabled="userAmount < paywallAmount || paymentReq"
diff --git a/lnbits/extensions/paywall/templates/paywall/index.html b/lnbits/extensions/paywall/templates/paywall/index.html
index fdda6cf5..2fe7b4ea 100644
--- a/lnbits/extensions/paywall/templates/paywall/index.html
+++ b/lnbits/extensions/paywall/templates/paywall/index.html
@@ -4,7 +4,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >New paywall</q-btn
         >
       </q-card-section>
@@ -141,7 +141,7 @@
             <q-item-section avatar>
               <q-checkbox
                 v-model="formDialog.data.remembers"
-                color="deep-purple"
+                color="primary"
               ></q-checkbox>
             </q-item-section>
             <q-item-section>
@@ -157,7 +157,7 @@
         <div class="row q-mt-lg">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="formDialog.data.amount == null || formDialog.data.amount < 0 || formDialog.data.url == null || formDialog.data.memo == null"
             type="submit"
             >Create paywall</q-btn
diff --git a/lnbits/extensions/satspay/templates/satspay/index.html b/lnbits/extensions/satspay/templates/satspay/index.html
index 3a02b0fc..711c69d8 100644
--- a/lnbits/extensions/satspay/templates/satspay/index.html
+++ b/lnbits/extensions/satspay/templates/satspay/index.html
@@ -5,10 +5,7 @@
     <q-card>
       <q-card-section>
         {% raw %}
-        <q-btn
-          unelevated
-          color="deep-purple"
-          @click="formDialogCharge.show = true"
+        <q-btn unelevated color="primary" @click="formDialogCharge.show = true"
           >New charge
         </q-btn>
       </q-card-section>
@@ -265,7 +262,7 @@
         <div class="row q-mt-lg">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 formDialogCharge.data.time == null ||
                 formDialogCharge.data.amount == null"
diff --git a/lnbits/extensions/splitpayments/templates/splitpayments/index.html b/lnbits/extensions/splitpayments/templates/splitpayments/index.html
index d592bcd1..a4559635 100644
--- a/lnbits/extensions/splitpayments/templates/splitpayments/index.html
+++ b/lnbits/extensions/splitpayments/templates/splitpayments/index.html
@@ -60,7 +60,7 @@
 
           <q-row class="row justify-evenly q-pa-lg">
             <q-col>
-              <q-btn unelevated outline color="purple" @click="clearTargets">
+              <q-btn unelevated outline color="secondary" @click="clearTargets">
                 Clear
               </q-btn>
             </q-col>
@@ -68,7 +68,7 @@
             <q-col>
               <q-btn
                 unelevated
-                color="deep-purple"
+                color="primary"
                 type="submit"
                 :disabled="!isDirty"
               >
diff --git a/lnbits/extensions/subdomains/templates/subdomains/display.html b/lnbits/extensions/subdomains/templates/subdomains/display.html
index e46228cd..e52ac73c 100644
--- a/lnbits/extensions/subdomains/templates/subdomains/display.html
+++ b/lnbits/extensions/subdomains/templates/subdomains/display.html
@@ -53,7 +53,7 @@
           <div class="row q-mt-lg">
             <q-btn
               unelevated
-              color="deep-purple"
+              color="primary"
               :disable="formDialog.data.subdomain == '' || formDialog.data.ip == '' || formDialog.data.duration == ''"
               type="submit"
               >Submit</q-btn
diff --git a/lnbits/extensions/subdomains/templates/subdomains/index.html b/lnbits/extensions/subdomains/templates/subdomains/index.html
index 74fd4ade..8b2aa841 100644
--- a/lnbits/extensions/subdomains/templates/subdomains/index.html
+++ b/lnbits/extensions/subdomains/templates/subdomains/index.html
@@ -5,7 +5,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="domainDialog.show = true"
+        <q-btn unelevated color="primary" @click="domainDialog.show = true"
           >New Domain</q-btn
         >
       </q-card-section>
@@ -233,14 +233,14 @@
           <q-btn
             v-if="domainDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update Form</q-btn
           >
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="domainDialog.data.cost == null || domainDialog.data.cost < 0 || domainDialog.data.domain == null"
             type="submit"
             >Create Domain</q-btn
diff --git a/lnbits/extensions/tpos/templates/tpos/index.html b/lnbits/extensions/tpos/templates/tpos/index.html
index 43edb618..f529d955 100644
--- a/lnbits/extensions/tpos/templates/tpos/index.html
+++ b/lnbits/extensions/tpos/templates/tpos/index.html
@@ -4,7 +4,7 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >New TPoS</q-btn
         >
       </q-card-section>
@@ -119,7 +119,7 @@
         <div class="row q-mt-lg">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="formDialog.data.currency == null || formDialog.data.name == null"
             type="submit"
             >Create TPoS</q-btn
diff --git a/lnbits/extensions/usermanager/templates/usermanager/index.html b/lnbits/extensions/usermanager/templates/usermanager/index.html
index 20c1577c..358da638 100644
--- a/lnbits/extensions/usermanager/templates/usermanager/index.html
+++ b/lnbits/extensions/usermanager/templates/usermanager/index.html
@@ -4,10 +4,10 @@
   <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn unelevated color="deep-purple" @click="userDialog.show = true"
+        <q-btn unelevated color="primary" @click="userDialog.show = true"
           >New User</q-btn
         >
-        <q-btn unelevated color="deep-purple" @click="walletDialog.show = true"
+        <q-btn unelevated color="primary" @click="walletDialog.show = true"
           >New Wallet
         </q-btn>
       </q-card-section>
@@ -172,7 +172,7 @@
 
         <q-btn
           unelevated
-          color="deep-purple"
+          color="primary"
           :disable="userDialog.data.walname == null"
           type="submit"
           >Create User</q-btn
@@ -202,7 +202,7 @@
         ></q-input>
         <q-btn
           unelevated
-          color="deep-purple"
+          color="primary"
           :disable="walletDialog.data.walname == null"
           type="submit"
           >Create Wallet</q-btn
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 904fbff2..011fe2aa 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -5,10 +5,10 @@
     <q-card>
       <q-card-section>
         {% raw %}
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >New wallet
         </q-btn>
-        <q-btn unelevated color="deep-purple" icon="edit">
+        <q-btn unelevated color="primary" icon="edit">
           <div class="cursor-pointer">
             <q-tooltip> Point to another Mempool </q-tooltip>
             {{ this.mempool.endpoint }}
@@ -143,7 +143,7 @@
         <div class="row q-mt-lg">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 formDialog.data.masterpub == null ||
                 formDialog.data.title == null"
diff --git a/lnbits/extensions/withdraw/templates/withdraw/index.html b/lnbits/extensions/withdraw/templates/withdraw/index.html
index 7442ca96..ebf18b07 100644
--- a/lnbits/extensions/withdraw/templates/withdraw/index.html
+++ b/lnbits/extensions/withdraw/templates/withdraw/index.html
@@ -6,13 +6,10 @@
   <div class="col-12 col-md-7 q-gutter-y-md">
     <q-card>
       <q-card-section>
-        <q-btn
-          unelevated
-          color="deep-purple"
-          @click="simpleformDialog.show = true"
+        <q-btn unelevated color="primary" @click="simpleformDialog.show = true"
           >Quick vouchers</q-btn
         >
-        <q-btn unelevated color="deep-purple" @click="formDialog.show = true"
+        <q-btn unelevated color="primary" @click="formDialog.show = true"
           >Advanced withdraw link(s)</q-btn
         >
       </q-card-section>
@@ -197,7 +194,7 @@
             <q-item-section avatar>
               <q-checkbox
                 v-model="formDialog.data.is_unique"
-                color="deep-purple"
+                color="primary"
               ></q-checkbox>
             </q-item-section>
             <q-item-section>
@@ -216,14 +213,14 @@
           <q-btn
             v-if="formDialog.data.id"
             unelevated
-            color="deep-purple"
+            color="primary"
             type="submit"
             >Update withdraw link</q-btn
           >
           <q-btn
             v-else
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 formDialog.data.wallet == null ||
                 formDialog.data.title == null ||
@@ -281,7 +278,7 @@
         <div class="row q-mt-lg">
           <q-btn
             unelevated
-            color="deep-purple"
+            color="primary"
             :disable="
                 simpleformDialog.data.wallet == null ||
 
@@ -324,7 +321,7 @@
         qrCodeDialog.data.uses }}
         <q-linear-progress
           :value="qrCodeDialog.data.used / qrCodeDialog.data.uses"
-          color="deep-purple"
+          color="primary"
           class="q-mt-sm"
         ></q-linear-progress>
       </p>
diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index e1faf2fe..f1ce57ad 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -118,7 +118,7 @@ Vue.component('lnbits-extension-list', {
         <q-item-section side>
           <q-avatar size="md"
             :color="(extension.isActive)
-              ? (($q.dark.isActive) ? 'deep-purple-5' : 'deep-purple')
+              ? (($q.dark.isActive) ? 'primary' : 'primary')
               : 'grey-5'">
             <q-icon :name="extension.icon" :size="($q.dark.isActive) ? '21px' : '20px'"
               :color="($q.dark.isActive) ? 'blue-grey-10' : 'grey-3'"></q-icon>
@@ -219,7 +219,7 @@ Vue.component('lnbits-payment-details', {
       </div>
       <div class="row" v-for="entry in extras">
         <div class="col-3">
-          <q-badge v-if="hasTag" color="purple" text-color="white">
+          <q-badge v-if="hasTag" color="secondary" text-color="white">
             extra
           </q-badge>
           <b>{{ entry.key }}</b>:
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index d65c0c4f..443e6b47 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -36,8 +36,8 @@ $themes: (
 @each $theme, $colors in $themes {
   @each $name, $color in $colors {
     @if $name == 'dark' {
-      body.body--dark [data-theme='#{$theme}'],
       [data-theme='#{$theme}'] .q-drawer--dark,
+      body.body--dark [data-theme='#{$theme}'] .q-layout,
       [data-theme='#{$theme}'] .q-menu--dark {
         background: $color !important;
       }

From 78605982fcdd8a886cb21e979cfebfb5b67b098b Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Tue, 29 Jun 2021 09:39:12 +0100
Subject: [PATCH 04/11] Working, but need to store selection in localstorage

---
 .../copilot/templates/copilot/index.html      | 16 +-------
 lnbits/static/js/base.js                      |  6 +++
 lnbits/static/scss/base.scss                  | 24 ++++-------
 lnbits/templates/base.html                    | 40 ++++++++++++++++++-
 4 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/lnbits/extensions/copilot/templates/copilot/index.html b/lnbits/extensions/copilot/templates/copilot/index.html
index accebff0..0e652e71 100644
--- a/lnbits/extensions/copilot/templates/copilot/index.html
+++ b/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: {
diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index cebd5cfc..863d022c 100644
--- a/lnbits/static/js/base.js
+++ b/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)
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 443e6b47..76d0fbf9 100644
--- a/lnbits/static/scss/base.scss
+++ b/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)
   )
 );
 
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 6ac09382..0842ca0a 100644
--- a/lnbits/templates/base.html
+++ b/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>

From 893801b30e3474e95498ac4fa03846acf340c37c Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Tue, 29 Jun 2021 09:42:46 +0100
Subject: [PATCH 05/11] Added env var to be checked

Theme options available to users could be limited here
---
 .env.example       | 5 +----
 lnbits/commands.py | 8 +-------
 lnbits/settings.py | 5 +----
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/.env.example b/.env.example
index 392f848a..d44f9555 100644
--- a/.env.example
+++ b/.env.example
@@ -15,10 +15,7 @@ LNBITS_SERVICE_FEE="0.0"
 
 # Change theme
 LNBITS_SITE_TITLE=LNbits
-LNBITS_PRIMARY_COLOR="#673ab7"
-LNBITS_SECONDARY_COLOR="#9c27b0"
-LNBITS_BG_COLOR="#1f2234"
-LNBITS_DARKCARD_COLOR="#333646"
+LNBITS_THEME_OPTIONS="classic,green,orange"
 
 # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC),
 #             LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet
diff --git a/lnbits/commands.py b/lnbits/commands.py
index b688e6e4..2e9b837f 100644
--- a/lnbits/commands.py
+++ b/lnbits/commands.py
@@ -13,13 +13,7 @@ from .helpers import (
     get_js_vendored,
     url_for_vendored,
 )
-from .settings import (
-    LNBITS_PATH,
-    LNBITS_PRIMARY_COLOR,
-    LNBITS_SECONDARY_COLOR,
-    LNBITS_BG_COLOR,
-    LNBITS_DARKCARD_COLOR,
-)
+from .settings import LNBITS_PATH
 
 
 @click.command("migrate")
diff --git a/lnbits/settings.py b/lnbits/settings.py
index cf1c29d7..8ce0ff3b 100644
--- a/lnbits/settings.py
+++ b/lnbits/settings.py
@@ -31,10 +31,7 @@ LNBITS_DISABLED_EXTENSIONS: List[str] = env.list(
 )
 
 LNBITS_SITE_TITLE = env.str("LNBITS_SITE_TITLE", default="LNbits")
-LNBITS_PRIMARY_COLOR = env.str("LNBITS_PRIMARY_COLOR", default="#673ab7")
-LNBITS_SECONDARY_COLOR = env.str("LNBITS_SECONDARY_COLOR", default="#9c27b0")
-LNBITS_BG_COLOR = env.str("LNBITS_BG_COLOR", default="#1f2234")
-LNBITS_DARKCARD_COLOR = env.str("LNBITS_DARKCARD_COLOR", default="#333646")
+LNBITS_THEME_OPTIONS = env.str("LNBITS_THEME_OPTIONS", default="classic,green,orange")
 
 WALLET = wallet_class()
 DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet")

From 66445b228a2ed208dbebbc4b5a0228249c5d4ef0 Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Tue, 29 Jun 2021 10:00:10 +0100
Subject: [PATCH 06/11] Fixed bug

---
 lnbits/static/js/components.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index f1ce57ad..0845b555 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -35,7 +35,7 @@ Vue.component('lnbits-wallet-list', {
         <q-item-section side>
           <q-avatar size="md"
             :color="(activeWallet && activeWallet.id === wallet.id)
-              ? (($q.dark.isActive) ? 'deep-purple-5' : 'deep-purple')
+              ? (($q.dark.isActive) ? 'primary' : 'primary')
               : 'grey-5'">
             <q-icon name="flash_on" :size="($q.dark.isActive) ? '21px' : '20px'"
               :color="($q.dark.isActive) ? 'blue-grey-10' : 'grey-3'"></q-icon>

From 40f50135bbeabe860cbda2526640827e33dd71c4 Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Wed, 30 Jun 2021 11:21:57 +0100
Subject: [PATCH 07/11] default classic theme

---
 lnbits/templates/base.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 0842ca0a..4ac0a4d9 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -20,8 +20,8 @@
     {% block head_scripts %}{% endblock %}
   </head>
 
-  <body>
-    <q-layout id="vue" view="hHh lpR lfr" v-cloak>
+  <body data-theme="classic">
+    <q-layout :color="dark" id="vue" view="hHh lpR lfr" v-cloak>
       <q-header bordered class="bg-marginal-bg">
         <q-toolbar>
           {% block drawer_toggle %}

From 4e43d2d52ee6976a262f651f98c9165807da8eb8 Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Wed, 30 Jun 2021 12:40:58 +0100
Subject: [PATCH 08/11] theme saved and works

---
 lnbits/static/js/base.js     | 7 ++++++-
 lnbits/static/scss/base.scss | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index 863d022c..84a73b13 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -307,7 +307,8 @@ window.windowMixin = {
         extensions: [],
         user: null,
         wallet: null,
-        payments: []
+        payments: [],
+        
       }
     }
   },
@@ -317,6 +318,7 @@ window.windowMixin = {
       document.body.setAttribute('data-theme', newValue)
       console.log(document.body.getAttribute('data-theme'))
       console.log(newValue)
+      this.$q.localStorage.set('lnbits.theme', newValue)
     },
     toggleDarkMode: function () {
       this.$q.dark.toggle()
@@ -334,6 +336,9 @@ window.windowMixin = {
   },
   created: function () {
     this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
+    if (this.$q.localStorage.getItem('lnbits.theme')){
+      document.body.setAttribute('data-theme', this.$q.localStorage.getItem('lnbits.theme'))
+    }
     if (window.user) {
       this.g.user = Object.freeze(window.LNbits.map.user(window.user))
     }
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 76d0fbf9..e34f1a65 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -29,7 +29,7 @@ $themes: (
   @each $name, $color in $colors {
     @if $name == 'dark' {
       [data-theme='#{$theme}'] .q-drawer--dark,
-      body.body--dark [data-theme='#{$theme}'] .q-layout,
+      body[data-theme='#{$theme}'].body--dark,
       [data-theme='#{$theme}'] .q-menu--dark {
         background: $color !important;
       }

From eac125a28e2d4f4388dd9b8641300bfcf1a237b6 Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Wed, 30 Jun 2021 13:08:11 +0100
Subject: [PATCH 09/11] Works, although .env not currently supported

---
 lnbits/static/scss/base.scss | 24 +++++++++++++++++++--
 lnbits/templates/base.html   | 41 +++++++++++++++++++++++++++++-------
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index e34f1a65..003b866c 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -7,7 +7,7 @@ $themes: (
     marginal-bg: #1f2234,
     marginal-text: #fff
   ),
-  'green': (
+  'mint': (
     primary: #3ab77d,
     secondary: #27b065,
     dark: #1f342b,
@@ -15,16 +15,36 @@ $themes: (
     marginal-bg: #1f342b,
     marginal-text: #fff
   ),
-  'orange': (
+  'autumn': (
     primary: #b7763a,
     secondary: #b07927,
     dark: #34291f,
     info: #463f33,
     marginal-bg: #342a1f,
     marginal-text: rgb(255, 255, 255)
+  ),
+  'flamingo': (
+    primary: #c64242,
+    secondary: #ff7474,
+    dark: #e75480,
+    info: #ec7599,
+    marginal-bg: #e75480,
+    marginal-text: rgb(255, 255, 255)
+  ),
+  'monochrome': (
+    primary: #494949,
+    secondary: #6b6b6b,
+    dark: #000,
+    info: rgb(39, 39, 39),
+    marginal-bg: #000,
+    marginal-text: rgb(255, 255, 255)
   )
 );
 
+[data-theme='quasar'] .q-drawer--dark {
+  background: #121212 !important;
+}
+
 @each $theme, $colors in $themes {
   @each $name, $color in $colors {
     @if $name == 'dark' {
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 4ac0a4d9..78bbd5d5 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -63,25 +63,50 @@
                 icon="format_color_fill"
                 color="deep-purple"
                 size="md"
-              >
-              </q-btn
+                ><q-tooltip>classic</q-tooltip> </q-btn
               ><q-btn
                 dense
                 flat
-                @click="changeColor('green')"
+                @click="changeColor('mint')"
                 icon="format_color_fill"
                 color="green"
                 size="md"
-              >
-              </q-btn
+                ><q-tooltip>mint</q-tooltip> </q-btn
               ><q-btn
                 dense
                 flat
-                @click="changeColor('orange')"
+                @click="changeColor('autumn')"
                 icon="format_color_fill"
-                color="orange"
+                color="brown"
                 size="md"
-              >
+                ><q-tooltip>autumn</q-tooltip>
+              </q-btn>
+              <q-btn
+                dense
+                flat
+                @click="changeColor('flamingo')"
+                icon="format_color_fill"
+                color="pink-3"
+                size="md"
+                ><q-tooltip>flamingo</q-tooltip>
+              </q-btn>
+              <q-btn
+                dense
+                flat
+                @click="changeColor('monochrome')"
+                icon="format_color_fill"
+                color="grey"
+                size="md"
+                ><q-tooltip>monochrome</q-tooltip>
+              </q-btn>
+              <q-btn
+                dense
+                flat
+                @click="changeColor('quasar')"
+                icon="format_color_fill"
+                color="blue"
+                size="md"
+                ><q-tooltip>quasar</q-tooltip>
               </q-btn>
             </div>
           </q-btn-dropdown>

From 55c564fe216bd02eba5267eb7b02436eaa49a26e Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Wed, 30 Jun 2021 13:38:10 +0100
Subject: [PATCH 10/11] Fixed jukebox to match style

---
 lnbits/core/static/js/wallet.js               |  3 --
 .../jukebox/templates/jukebox/index.html      | 34 +++++++++----------
 .../templates/offlineshop/index.html          |  2 +-
 lnbits/static/js/base.js                      | 14 ++++----
 lnbits/static/scss/base.scss                  |  5 +--
 5 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/lnbits/core/static/js/wallet.js b/lnbits/core/static/js/wallet.js
index e95525ab..d0191051 100644
--- a/lnbits/core/static/js/wallet.js
+++ b/lnbits/core/static/js/wallet.js
@@ -111,7 +111,6 @@ new Vue({
   mixins: [windowMixin],
   data: function () {
     return {
-      
       user: LNbits.map.user(window.user),
       receive: {
         show: false,
@@ -623,7 +622,6 @@ new Vue({
     }
   },
   created: function () {
-    
     this.fetchBalance()
     this.fetchPayments()
 
@@ -637,7 +635,6 @@ new Vue({
       })
   },
   mounted: function () {
-    
     // show disclaimer
     if (
       this.$refs.disclaimer &&
diff --git a/lnbits/extensions/jukebox/templates/jukebox/index.html b/lnbits/extensions/jukebox/templates/jukebox/index.html
index 0bdcc3f0..ee572111 100644
--- a/lnbits/extensions/jukebox/templates/jukebox/index.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/index.html
@@ -6,7 +6,7 @@
       <q-card-section>
         <q-btn
           unelevated
-          color="green-7"
+          color="primary"
           class="q-ma-lg"
           @click="openNewDialog()"
           >Add Spotify Jukebox</q-btn
@@ -108,8 +108,8 @@
     <q-card class="q-pa-md q-pt-lg q-mt-md" style="width: 100%">
       <q-stepper
         v-model="step"
-        active-color="green-7"
-        inactive-color="green-10"
+        active-color="primary"
+        inactive-color="secondary"
         vertical
         animated
       >
@@ -149,15 +149,15 @@
             <div class="col-4">
               <q-btn
                 v-if="jukeboxDialog.data.title != null && jukeboxDialog.data.price != null && jukeboxDialog.data.wallet != null"
-                color="green-7"
+                color="primary"
                 @click="step = 2"
                 >Continue</q-btn
               >
-              <q-btn v-else color="green-7" disable>Continue</q-btn>
+              <q-btn v-else color="primary" disable>Continue</q-btn>
             </div>
             <div class="col-8">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn
@@ -208,17 +208,17 @@
             <div class="col-4">
               <q-btn
                 v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
-                color="green-7"
+                color="primary"
                 @click="submitSpotifyKeys"
                 >Submit keys</q-btn
               >
-              <q-btn v-else color="green-7" disable color="green-7"
+              <q-btn v-else color="primary" disable color="primary"
                 >Submit keys</q-btn
               >
             </div>
             <div class="col-8">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn
@@ -237,7 +237,7 @@
             dense
             outline
             unelevated
-            color="green-7"
+            color="primary"
             size="xs"
             @click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
             >{% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
@@ -256,17 +256,17 @@
             <div class="col-4">
               <q-btn
                 v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
-                color="green-7"
+                color="primary"
                 @click="authAccess"
                 >Authorise access</q-btn
               >
-              <q-btn v-else color="green-7" disable color="green-7"
+              <q-btn v-else color="primary" disable color="primary"
                 >Authorise access</q-btn
               >
             </div>
             <div class="col-8">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn
@@ -281,7 +281,7 @@
           :name="4"
           title="Select playlists"
           icon="queue_music"
-          active-color="green-8"
+          active-color="primary"
           :done="step > 4"
         >
           <q-select
@@ -307,15 +307,15 @@
             <div class="col-5">
               <q-btn
                 v-if="jukeboxDialog.data.sp_device != null && jukeboxDialog.data.sp_playlists != null"
-                color="green-7"
+                color="primary"
                 @click="createJukebox"
                 >Create Jukebox</q-btn
               >
-              <q-btn v-else color="green-7" disable>Create Jukebox</q-btn>
+              <q-btn v-else color="primary" disable>Create Jukebox</q-btn>
             </div>
             <div class="col-7">
               <q-btn
-                color="green-7"
+                color="primary"
                 class="float-right"
                 @click="closeFormDialog"
                 >Cancel</q-btn
diff --git a/lnbits/extensions/offlineshop/templates/offlineshop/index.html b/lnbits/extensions/offlineshop/templates/offlineshop/index.html
index e840f563..2ded94c6 100644
--- a/lnbits/extensions/offlineshop/templates/offlineshop/index.html
+++ b/lnbits/extensions/offlineshop/templates/offlineshop/index.html
@@ -123,7 +123,7 @@
       <q-tabs
         v-model="confirmationMethod"
         no-caps
-        class="bg-purple text-white shadow-2"
+        class="bg-dark text-white shadow-2"
       >
         <q-tab name="wordlist" label="Wordlist"></q-tab>
         <q-tab name="totp" label="TOTP (Google Authenticator)"></q-tab>
diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index 84a73b13..ca30dfef 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -307,14 +307,13 @@ window.windowMixin = {
         extensions: [],
         user: null,
         wallet: null,
-        payments: [],
-        
+        payments: []
       }
     }
   },
-  
+
   methods: {
-    changeColor: function(newValue) {
+    changeColor: function (newValue) {
       document.body.setAttribute('data-theme', newValue)
       console.log(document.body.getAttribute('data-theme'))
       console.log(newValue)
@@ -336,8 +335,11 @@ window.windowMixin = {
   },
   created: function () {
     this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
-    if (this.$q.localStorage.getItem('lnbits.theme')){
-      document.body.setAttribute('data-theme', this.$q.localStorage.getItem('lnbits.theme'))
+    if (this.$q.localStorage.getItem('lnbits.theme')) {
+      document.body.setAttribute(
+        'data-theme',
+        this.$q.localStorage.getItem('lnbits.theme')
+      )
     }
     if (window.user) {
       this.g.user = Object.freeze(window.LNbits.map.user(window.user))
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 003b866c..28a4735b 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -25,7 +25,7 @@ $themes: (
   ),
   'flamingo': (
     primary: #c64242,
-    secondary: #ff7474,
+    secondary: #cf5656,
     dark: #e75480,
     info: #ec7599,
     marginal-bg: #e75480,
@@ -55,7 +55,8 @@ $themes: (
       }
     }
     @if $name == 'info' {
-      [data-theme='#{$theme}'] .q-card--dark {
+      [data-theme='#{$theme}'] .q-card--dark,
+      [data-theme='#{$theme}'] .q-stepper--dark {
         background: $color !important;
       }
     }

From e8e4116cdf88434ad38a7d23cccf9cf78f10e896 Mon Sep 17 00:00:00 2001
From: Ben Arc <ben@arc.wales>
Date: Wed, 30 Jun 2021 13:42:47 +0100
Subject: [PATCH 11/11] Improved pink

---
 lnbits/static/scss/base.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 28a4735b..3766d164 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -24,8 +24,8 @@ $themes: (
     marginal-text: rgb(255, 255, 255)
   ),
   'flamingo': (
-    primary: #c64242,
-    secondary: #cf5656,
+    primary: #d11d53,
+    secondary: #db3e6d,
     dark: #e75480,
     info: #ec7599,
     marginal-bg: #e75480,