Read .env themeing colors

- allowed/availabe themes defined by admin

.env.example

@@ -15,7 +15,8 @@ LNBITS_SERVICE_FEE="0.0"
 
 # Change theme
 LNBITS_SITE_TITLE=LNbits
-LNBITS_THEME_OPTIONS="classic,green,orange"
+# Choose from mint, flamingo, quasar, autumn, monochrome
+LNBITS_THEME_OPTIONS="mint, flamingo, quasar, autumn, monochrome"
 
 # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC),
 #             LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet

lnbits/app.py

@@ -104,6 +104,7 @@ def register_assets(app: QuartTrio):
 def register_filters(app: QuartTrio):
     """Jinja filters."""
     app.jinja_env.globals["SITE_TITLE"] = app.config["LNBITS_SITE_TITLE"]
+    app.jinja_env.globals["LNBITS_THEME_OPTIONS"] = app.config["LNBITS_THEME_OPTIONS"]
     app.jinja_env.globals["LNBITS_VERSION"] = app.config["LNBITS_COMMIT"]
     app.jinja_env.globals["EXTENSIONS"] = get_valid_extensions()
 

lnbits/static/js/base.js

@@ -307,7 +307,8 @@ window.windowMixin = {
         extensions: [],
         user: null,
         wallet: null,
-        payments: []
+        payments: [],
+        allowedThemes: null
       }
     }
   },
@@ -335,6 +336,7 @@ 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',

lnbits/templates/base.html

@@ -48,6 +48,7 @@
           </q-badge>
           {% endblock %}
           <q-btn-dropdown
+            v-if="g.allowedThemes"
             dense
             flat
             round
@@ -65,6 +66,7 @@
                 size="md"
                 ><q-tooltip>classic</q-tooltip> </q-btn
               ><q-btn
+                v-if="g.allowedThemes.includes('mint')"
                 dense
                 flat
                 @click="changeColor('mint')"
@@ -73,6 +75,7 @@
                 size="md"
                 ><q-tooltip>mint</q-tooltip> </q-btn
               ><q-btn
+                v-if="g.allowedThemes.includes('autumn')"
                 dense
                 flat
                 @click="changeColor('autumn')"
@@ -82,6 +85,7 @@
                 ><q-tooltip>autumn</q-tooltip>
               </q-btn>
               <q-btn
+                v-if="g.allowedThemes.includes('flamingo')"
                 dense
                 flat
                 @click="changeColor('flamingo')"
@@ -91,6 +95,7 @@
                 ><q-tooltip>flamingo</q-tooltip>
               </q-btn>
               <q-btn
+                v-if="g.allowedThemes.includes('monochrome')"
                 dense
                 flat
                 @click="changeColor('monochrome')"
@@ -100,6 +105,7 @@
                 ><q-tooltip>monochrome</q-tooltip>
               </q-btn>
               <q-btn
+                v-if="g.allowedThemes.includes('quasar')"
                 dense
                 flat
                 @click="changeColor('quasar')"
@@ -179,6 +185,12 @@
     <!---->
     <script src="/static/js/base.js"></script>
     <script src="/static/js/components.js"></script>
+    <script type="text/javascript">
+      const themes = {{ LNBITS_THEME_OPTIONS  | tojson }}
+      if(themes && themes.length) {
+        window.allowedThemes = themes.trim()
+      }
+    </script>
     {% block scripts %}{% endblock %}
   </body>
 </html>