Merge pull request #242 from talvasconcelos/feature/readthemeenv

Fix theme choosing

.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

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, flamingo, mint, salvador, monochrome, autumn", subcast=str)
 
 WALLET = wallet_class()
 DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet")

lnbits/static/js/base.js

@@ -334,13 +334,26 @@ window.windowMixin = {
   },
   created: function () {
     this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
-    this.g.allowedThemes = window.allowedThemes
+    this.g.allowedThemes = window.allowedThemes ?? ['classic']
+
+    // failsafe if admin changes themes halfway
+    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])
+    }
+
     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))
     }

lnbits/static/scss/base.scss

@@ -49,6 +49,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,

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
@@ -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')"
@@ -85,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')"
@@ -95,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')"
@@ -105,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')"
@@ -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 %}