From 4493e93890cf83587a6095fa09de0d7a3b782e53 Mon Sep 17 00:00:00 2001
From: Tiago vasconcelos <talvasconcelos@gmail.com>
Date: Thu, 1 Jul 2021 11:54:45 +0100
Subject: [PATCH] small fix for theme picking/seting

---
 lnbits/settings.py           |  2 +-
 lnbits/static/js/base.js     | 21 ++++++++++++++-------
 lnbits/static/scss/base.scss |  7 +++++++
 lnbits/templates/base.html   |  5 +++--
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/lnbits/settings.py b/lnbits/settings.py
index 8ce0ff3b5..58c5aa152 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 = env.str("LNBITS_THEME_OPTIONS", default="classic,green,orange")
+LNBITS_THEME_OPTIONS: List[str] = env.list("LNBITS_THEME_OPTIONS", default="classic,green,orange", 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 40044cb74..45b2c8917 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -316,8 +316,8 @@ window.windowMixin = {
   methods: {
     changeColor: function (newValue) {
       document.body.setAttribute('data-theme', newValue)
-      console.log(document.body.getAttribute('data-theme'))
-      console.log(newValue)
+      //console.log(document.body.getAttribute('data-theme'))
+      //console.log(newValue)
       this.$q.localStorage.set('lnbits.theme', newValue)
     },
     toggleDarkMode: function () {
@@ -337,12 +337,19 @@ window.windowMixin = {
   created: function () {
     this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
     this.g.allowedThemes = window.allowedThemes
-    if (this.$q.localStorage.getItem('lnbits.theme')) {
-      document.body.setAttribute(
-        'data-theme',
-        this.$q.localStorage.getItem('lnbits.theme')
-      )
+
+    let theme = this.$q.localStorage.getItem('lnbits.theme')
+
+    // failsafe if admin changes themes halfway
+    if (theme && !this.g.allowedThemes.includes(theme)) {
+      console.log('allowedThemes changed by Admin', this.g.allowedThemes[0])
+      this.changeColor(this.g.allowedThemes[0] || 'classic')
     }
+
+    if (theme) {
+      document.body.setAttribute('data-theme', 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 3766d164b..5498ddfb4 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -53,6 +53,13 @@ $themes: (
       [data-theme='#{$theme}'] .q-menu--dark {
         background: $color !important;
       }
+
+      /* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
+      // set a darker body bg for all themes, when in "dark mode"
+      body[data-theme='#{$theme}'].body--dark {
+        background: scale-color($color, $lightness: -60%);
+      }
+      */
     }
     @if $name == 'info' {
       [data-theme='#{$theme}'] .q-card--dark,
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 0e4fd787c..1f0fb845f 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -48,7 +48,7 @@
           </q-badge>
           {% endblock %}
           <q-btn-dropdown
-            v-if="g.allowedThemes"
+            v-if="g.allowedThemes && g.allowedThemes.length > 1"
             dense
             flat
             round
@@ -58,6 +58,7 @@
           >
             <div class="row no-wrap q-pa-md">
               <q-btn
+                v-if="g.allowedThemes.includes('classic')"
                 dense
                 flat
                 @click="changeColor('classic')"
@@ -188,7 +189,7 @@
     <script type="text/javascript">
       const themes = {{ LNBITS_THEME_OPTIONS  | tojson }}
       if(themes && themes.length) {
-        window.allowedThemes = themes.trim()
+        window.allowedThemes = themes.map(str => str.trim())
       }
     </script>
     {% block scripts %}{% endblock %}