small fix for theme picking/seting

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")

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(document.body.getAttribute('data-theme'))
-      console.log(newValue)
+      //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(
+    let theme = this.$q.localStorage.getItem('lnbits.theme')
-        'data-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))
     }

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,

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 %}