added envs, testing color switch

.env.example

@@ -5,7 +5,7 @@ QUART_DEBUG=true
 HOST=127.0.0.1
 PORT=5000
 
-LNBITS_SITE_TITLE=LNbits
+
 LNBITS_ALLOWED_USERS=""
 LNBITS_DEFAULT_WALLET_NAME="LNbits wallet"
 LNBITS_DATA_FOLDER="./data"
@@ -13,6 +13,13 @@ LNBITS_DISABLED_EXTENSIONS="amilk"
 LNBITS_FORCE_HTTPS=true
 LNBITS_SERVICE_FEE="0.0"
 
+# Change theme
+LNBITS_SITE_TITLE=LNbits
+LNBITS_PRIMARY_COLOR="#673ab7"
+LNBITS_SECONDARY_COLOR="#9c27b0"
+LNBITS_BG_COLOR="#1f2234"
+LNBITS_DARKCARD_COLOR="#333646"
+
 # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC),
 #             LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet
 LNBITS_BACKEND_WALLET_CLASS=VoidWallet

lnbits/commands.py

@@ -13,7 +13,13 @@ from .helpers import (
     get_js_vendored,
     url_for_vendored,
 )
-from .settings import LNBITS_PATH
+from .settings import (
+    LNBITS_PATH,
+    LNBITS_PRIMARY_COLOR,
+    LNBITS_SECONDARY_COLOR,
+    LNBITS_BG_COLOR,
+    LNBITS_DARKCARD_COLOR,
+)
 
 
 @click.command("migrate")

lnbits/core/static/js/wallet.js

@@ -111,6 +111,7 @@ new Vue({
   mixins: [windowMixin],
   data: function () {
     return {
+      
       user: LNbits.map.user(window.user),
       receive: {
         show: false,
@@ -622,6 +623,7 @@ new Vue({
     }
   },
   created: function () {
+    
     this.fetchBalance()
     this.fetchPayments()
 
@@ -635,6 +637,7 @@ new Vue({
       })
   },
   mounted: function () {
+    
     // show disclaimer
     if (
       this.$refs.disclaimer &&

lnbits/extensions/copilot/templates/copilot/index.html

@@ -5,12 +5,14 @@
     <q-card>
       <q-card-section>
         {% raw %}
-        <q-btn
+        <q-btn unelevated color="primary" @click="formDialogCopilot.show = true"
-          unelevated
-          color="deep-purple"
-          @click="formDialogCopilot.show = true"
           >New copilot instance
         </q-btn>
+        <q-select
+          v-model="theme"
+          :options="theOptions"
+          label="Standard"
+        ></q-select>
       </q-card-section>
     </q-card>
 
@@ -463,7 +465,16 @@
           data: null
         },
         options: ['bitcoin', 'confetti', 'rocket', 'face', 'martijn', 'rick'],
-        currencyOptions: ['None', 'btcusd', 'btceur', 'btcgbp']
+        currencyOptions: ['None', 'btcusd', 'btceur', 'btcgbp'],
+        theOptions: ['classic', 'dark', 'light', 'green'],
+        theme: ''
+      }
+    },
+    watch: {
+      theme(newValue) {
+        document.body.setAttribute('data-theme', newValue)
+        console.log(document.body.getAttribute('data-theme'))
+        console.log(newValue)
       }
     },
     methods: {

lnbits/settings.py

@@ -29,7 +29,12 @@ LNBITS_ALLOWED_USERS: List[str] = env.list(
 LNBITS_DISABLED_EXTENSIONS: List[str] = env.list(
     "LNBITS_DISABLED_EXTENSIONS", default=[], subcast=str
 )
+
 LNBITS_SITE_TITLE = env.str("LNBITS_SITE_TITLE", default="LNbits")
+LNBITS_PRIMARY_COLOR = env.str("LNBITS_PRIMARY_COLOR", default="#673ab7")
+LNBITS_SECONDARY_COLOR = env.str("LNBITS_SECONDARY_COLOR", default="#9c27b0")
+LNBITS_BG_COLOR = env.str("LNBITS_BG_COLOR", default="#1f2234")
+LNBITS_DARKCARD_COLOR = env.str("LNBITS_DARKCARD_COLOR", default="#333646")
 
 WALLET = wallet_class()
 DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet")

lnbits/static/scss/base.scss

@@ -1,31 +1,60 @@
-$dark-background: #1f2234;
+$themes: (
-$dark-card-background: #333646;
+  'classic': (
-
+    primary: #673ab7,
+    secondary: #9c27b0,
+    dark: #1f2234,
+    info: #333646,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  ),
+  'dark': (
+    primary: #3b2169,
+    secondary: #551561,
+    dark: #020203,
+    info: #15161d,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  ),
+  'light': (
+    primary: #703ec7,
+    secondary: #a32cb8,
+    dark: #4c4c74,
+    info: #555974,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  ),
+  'green': (
+    primary: #3ab77d,
+    secondary: #27b065,
+    dark: #1f342b,
+    info: #334642,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  )
+);
+@each $theme, $colors in $themes {
+  [data-theme='#{$theme}'] {
+    @each $name, $color in $colors {
+      .bg-#{$name} {
+        background: $color !important;
+      }
+      .text-#{$name} {
+        color: $color !important;
+      }
+    }
+  }
+}
 
 [v-cloak] {
   display: none;
 }
 
-.bg-lnbits-dark {
-  background-color: $dark-background;
-}
-
-body.body--dark,
-body.body--dark .q-drawer--dark,
-body.body--dark .q-menu--dark {
-  background: $dark-background;
-}
-
-body.body--dark .q-card--dark {
-  background: $dark-card-background;
-}
-
 body.body--dark .q-table--dark {
   background: transparent;
 }
 
 body.body--light,
-body.body--light .q-drawer  {
+body.body--light .q-drawer {
   background: whitesmoke;
 }