From 277460edb7ae9c0356a3f24590f6b81a68d8979e Mon Sep 17 00:00:00 2001
From: Tiago vasconcelos <talvasconcelos@gmail.com>
Date: Thu, 1 Jul 2021 12:34:50 +0100
Subject: [PATCH] final push for themes

---
 .env.example               |  4 ++--
 lnbits/settings.py         |  2 +-
 lnbits/static/js/base.js   | 20 +++++++++++++-------
 lnbits/templates/base.html |  8 ++++----
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/.env.example b/.env.example
index a9faad0b6..65e81428b 100644
--- a/.env.example
+++ b/.env.example
@@ -15,8 +15,8 @@ LNBITS_SERVICE_FEE="0.0"
 
 # Change theme
 LNBITS_SITE_TITLE=LNbits
-# Choose from mint, flamingo, quasar, autumn, monochrome
-LNBITS_THEME_OPTIONS="mint, flamingo, quasar, autumn, monochrome, salvador"
+# Choose from mint, flamingo, salvador, autumn, monochrome, classic
+LNBITS_THEME_OPTIONS="mint, flamingo, classic, autumn, monochrome, salvador"
 
 # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC),
 #             LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet
diff --git a/lnbits/settings.py b/lnbits/settings.py
index 58c5aa152..d7428f6cb 100644
--- a/lnbits/settings.py
+++ b/lnbits/settings.py
@@ -31,7 +31,7 @@ LNBITS_DISABLED_EXTENSIONS: List[str] = env.list(
 )
 
 LNBITS_SITE_TITLE = env.str("LNBITS_SITE_TITLE", default="LNbits")
-LNBITS_THEME_OPTIONS: List[str] = env.list("LNBITS_THEME_OPTIONS", default="classic,green,orange", subcast=str)
+LNBITS_THEME_OPTIONS: List[str] = env.list("LNBITS_THEME_OPTIONS", default="classic, flamingo, mint, salvador, monochrome, autumn", subcast=str)
 
 WALLET = wallet_class()
 DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet")
diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index 8a4bbd345..44d02036e 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -334,18 +334,24 @@ window.windowMixin = {
   },
   created: function () {
     this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
-    this.g.allowedThemes = window.allowedThemes
-
-    let theme = this.$q.localStorage.getItem('lnbits.theme')
+    this.g.allowedThemes = window.allowedThemes ?? ['classic']
 
     // failsafe if admin changes themes halfway
-    if (theme && !this.g.allowedThemes.includes(theme)) {
+    if (
+      this.$q.localStorage.getItem('lnbits.theme') &&
+      !this.g.allowedThemes.includes(
+        this.$q.localStorage.getItem('lnbits.theme')
+      )
+    ) {
       console.log('allowedThemes changed by Admin', this.g.allowedThemes[0])
-      this.changeColor(this.g.allowedThemes[0] || 'classic')
+      this.changeColor(this.g.allowedThemes[0])
     }
 
-    if (theme) {
-      document.body.setAttribute('data-theme', theme)
+    if (this.$q.localStorage.getItem('lnbits.theme')) {
+      document.body.setAttribute(
+        'data-theme',
+        this.$q.localStorage.getItem('lnbits.theme')
+      )
     }
 
     if (window.user) {
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 3aa7767ef..9a54a71d3 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -39,7 +39,7 @@
             <strong>LN</strong>bits {% endif %} {% endblock %}
           </q-toolbar-title>
           {% block beta %}
-          <q-badge color="yellow" text-color="black">
+          <q-badge color="yellow" text-color="black" class="q-mr-md">
             <span
               ><span v-show="$q.screen.gt.sm"
                 >USE WITH CAUTION - LNbits wallet is still in </span
@@ -86,7 +86,7 @@
                 ><q-tooltip>autumn</q-tooltip>
               </q-btn>
               <q-btn
-                v-if="g.allowedThemes.includes('flamingo')"
+                v-if="g.allowedThemes.includes('monochrome')"
                 dense
                 flat
                 @click="changeColor('monochrome')"
@@ -96,7 +96,7 @@
                 ><q-tooltip>monochrome</q-tooltip>
               </q-btn>
               <q-btn
-                v-if="g.allowedThemes.includes('monochrome')"
+                v-if="g.allowedThemes.includes('salvador')"
                 dense
                 flat
                 @click="changeColor('salvador')"
@@ -106,7 +106,7 @@
                 ><q-tooltip>elSalvador</q-tooltip>
               </q-btn>
               <q-btn
-                v-if="g.allowedThemes.includes('quasar')"
+                v-if="g.allowedThemes.includes('flamingo')"
                 dense
                 flat
                 @click="changeColor('flamingo')"