chore: update to version v1.2.0-rc3 (#3231)

lnbits/core/templates/core/account.html

@@ -368,89 +368,89 @@
                   </div>
                   <div class="col-8">
                     <q-btn
-                      v-if="allowedThemes.includes('classic')"
+                      v-if="g.allowedThemes.includes('classic')"
                       dense
                       flat
-                      @click="changeTheme('classic')"
+                      @click="themeChoiceFunc('classic')"
                       icon="circle"
                       color="deep-purple"
                       size="md"
                       ><q-tooltip>classic</q-tooltip>
                     </q-btn>
                     <q-btn
-                      v-if="allowedThemes.includes('bitcoin')"
+                      v-if="g.allowedThemes.includes('bitcoin')"
                       dense
                       flat
-                      @click="changeTheme('bitcoin')"
+                      @click="themeChoiceFunc('bitcoin')"
                       icon="circle"
                       color="deep-orange"
                       size="md"
                       ><q-tooltip>bitcoin</q-tooltip>
                     </q-btn>
                     <q-btn
-                      v-if="allowedThemes.includes('mint')"
+                      v-if="g.allowedThemes.includes('mint')"
                       dense
                       flat
-                      @click="changeTheme('mint')"
+                      @click="themeChoiceFunc('mint')"
                       icon="circle"
                       color="green"
                       size="md"
                       ><q-tooltip>mint</q-tooltip> </q-btn
                     ><q-btn
-                      v-if="allowedThemes.includes('autumn')"
+                      v-if="g.allowedThemes.includes('autumn')"
                       dense
                       flat
-                      @click="changeTheme('autumn')"
+                      @click="themeChoiceFunc('autumn')"
                       icon="circle"
                       color="brown"
                       size="md"
                       ><q-tooltip>autumn</q-tooltip>
                     </q-btn>
                     <q-btn
-                      v-if="allowedThemes.includes('monochrome')"
+                      v-if="g.allowedThemes.includes('monochrome')"
                       dense
                       flat
-                      @click="changeTheme('monochrome')"
+                      @click="themeChoiceFunc('monochrome')"
                       icon="circle"
                       color="grey"
                       size="md"
                       ><q-tooltip>monochrome</q-tooltip>
                     </q-btn>
                     <q-btn
-                      v-if="allowedThemes.includes('salvador')"
+                      v-if="g.allowedThemes.includes('salvador')"
                       dense
                       flat
-                      @click="changeTheme('salvador')"
+                      @click="themeChoiceFunc('salvador')"
                       icon="circle"
                       color="blue-10"
                       size="md"
                       ><q-tooltip>elSalvador</q-tooltip>
                     </q-btn>
                     <q-btn
-                      v-if="allowedThemes.includes('freedom')"
+                      v-if="g.allowedThemes.includes('freedom')"
                       dense
                       flat
-                      @click="changeTheme('freedom')"
+                      @click="themeChoiceFunc('freedom')"
                       icon="circle"
                       color="pink-13"
                       size="md"
                       ><q-tooltip>freedom</q-tooltip>
                     </q-btn>
                     <q-btn
-                      v-if="allowedThemes.includes('cyber')"
+                      v-if="g.allowedThemes.includes('cyber')"
                       dense
                       flat
-                      @click="changeTheme('cyber')"
+                      @click="themeChoiceFunc('cyber')"
                       icon="circle"
                       color="light-green-9"
                       size="md"
                       ><q-tooltip>cyber</q-tooltip>
                     </q-btn>
                     <q-btn
-                      v-if="allowedThemes.includes('flamingo')"
+                      v-if="g.allowedThemes.includes('flamingo')"
                       dense
                       flat
-                      @click="changeTheme('flamingo')"
+                      @click="themeChoiceFunc('flamingo')"
                       icon="circle"
                       color="pink-3"
                       size="md"
@@ -464,9 +464,9 @@
                   </div>
                   <div class="col-8">
                     <q-input
-                      v-model="bgimageChoice"
+                      v-model="bgimageSelection"
                       :label="$t('background_image')"
-                      @update:model-value="applyBackgroundImage"
+                      @update:model-value="bgimageChoiceFunc"
                     >
                       <q-tooltip
                         ><span v-text="$t('background_image')"></span
@@ -479,18 +479,19 @@
                     <span v-text="$t('gradient_background')"></span>
                   </div>
                   <div class="col-8">
-                    <q-toggle
+                    <q-btn
                       dense
                       flat
                       round
+                      @click="toggleGradient"
                       icon="gradient"
+                      size="sm"
                       v-model="gradientChoice"
-                      @update:model-value="applyGradient"
                     >
                       <q-tooltip
                         ><span v-text="$t('toggle_gradient')"></span
                       ></q-tooltip>
-                    </q-toggle>
+                    </q-btn>
                   </div>
                 </div>
 
@@ -499,11 +500,10 @@
                     <span v-text="$t('toggle_darkmode')"></span>
                   </div>
                   <div class="col-8">
-                    <q-toggle
+                    <q-btn
                       dense
                       flat
                       round
-                      v-model="darkChoice"
                       @click="toggleDarkMode"
                       :icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
                       size="sm"
@@ -511,7 +511,7 @@
                       <q-tooltip
                         ><span v-text="$t('toggle_darkmode')"></span
                       ></q-tooltip>
-                    </q-toggle>
+                    </q-btn>
                   </div>
                 </div>
                 <div class="row q-mb-md">
@@ -520,7 +520,7 @@
                   </div>
                   <div class="col-8">
                     <q-select
-                      v-model="borderChoice"
+                      v-model="borderSelection"
                       :options="borderOptions"
                       label="Borders"
                       @update:model-value="applyBorder"
@@ -548,7 +548,7 @@
                   </div>
                   <div class="col-8">
                     <q-select
-                      v-model="reactionChoice"
+                      v-model="reactionSelection"
                       :options="reactionOptions"
                       label="Reactions"
                       @update:model-value="reactionChoiceFunc"

lnbits/static/css/base.css

@@ -1,218 +1,617 @@
-body[data-theme=classic].neon-border .q-card,
-body[data-theme=classic].neon-border .q-card.q-card--dark,
-body[data-theme=classic].neon-border .q-date,
-body[data-theme=classic].neon-border .q-date--dark {
-  border: 2px solid #673ab7;
-  box-shadow: none;
+body[data-theme=classic].body--light {
+  background-color: #f4f4f4;
 }
 
-body[data-theme=bitcoin].neon-border .q-card,
-body[data-theme=bitcoin].neon-border .q-card.q-card--dark,
-body[data-theme=bitcoin].neon-border .q-date,
-body[data-theme=bitcoin].neon-border .q-date--dark {
-  border: 2px solid #ea611d;
-  box-shadow: none;
+body[data-theme=classic].body--light {
+  background-color: #f4f4f4;
 }
 
-body[data-theme=freedom].neon-border .q-card,
-body[data-theme=freedom].neon-border .q-card.q-card--dark,
-body[data-theme=freedom].neon-border .q-date,
-body[data-theme=freedom].neon-border .q-date--dark {
-  border: 2px solid #e22156;
-  box-shadow: none;
+[data-theme=classic] .q-drawer--dark,
+body[data-theme=classic].body--dark,
+[data-theme=classic] .q-menu--dark {
+  background: #1f2234 !important;
 }
 
-body[data-theme=cyber].neon-border .q-card,
-body[data-theme=cyber].neon-border .q-card.q-card--dark,
-body[data-theme=cyber].neon-border .q-date,
-body[data-theme=cyber].neon-border .q-date--dark {
-  border: 2px solid #7cb342;
-  box-shadow: none;
+/* 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='classic'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=classic].body--light {
+  background-color: #f4f4f4;
 }
 
-body[data-theme=mint].neon-border .q-card,
-body[data-theme=mint].neon-border .q-card.q-card--dark,
-body[data-theme=mint].neon-border .q-date,
-body[data-theme=mint].neon-border .q-date--dark {
-  border: 2px solid #3ab77d;
-  box-shadow: none;
-}
-
-body[data-theme=autumn].neon-border .q-card,
-body[data-theme=autumn].neon-border .q-card.q-card--dark,
-body[data-theme=autumn].neon-border .q-date,
-body[data-theme=autumn].neon-border .q-date--dark {
-  border: 2px solid #b7763a;
-  box-shadow: none;
-}
-
-body[data-theme=flamingo].neon-border .q-card,
-body[data-theme=flamingo].neon-border .q-card.q-card--dark,
-body[data-theme=flamingo].neon-border .q-date,
-body[data-theme=flamingo].neon-border .q-date--dark {
-  border: 2px solid #ff00ff;
-  box-shadow: none;
-}
-
-body[data-theme=monochrome].neon-border .q-card,
-body[data-theme=monochrome].neon-border .q-card.q-card--dark,
-body[data-theme=monochrome].neon-border .q-date,
-body[data-theme=monochrome].neon-border .q-date--dark {
-  border: 2px solid #494949;
-  box-shadow: none;
-}
-
-body[data-theme=salvador].neon-border .q-card,
-body[data-theme=salvador].neon-border .q-card.q-card--dark,
-body[data-theme=salvador].neon-border .q-date,
-body[data-theme=salvador].neon-border .q-date--dark {
-  border: 2px solid #1976d2;
-  box-shadow: none;
-}
-
-body.hard-border .q-card,
-body.hard-border .q-card.q-card--dark,
-body.hard-border .q-date,
-body.hard-border .q-date--dark {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.2784313725);
-  border: none;
-}
-
-body.retro-border .q-card,
-body.retro-border .q-card.q-card--dark,
-body.retro-border .q-date,
-body.retro-border .q-date--dark {
-  border: none;
-  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2), 0 2px 2px rgba(255, 255, 255, 0.14), 0 3px 1px -2px rgba(255, 255, 255, 0.12);
-}
-
-body.no-border .q-card,
-body.no-border .q-card.q-card--dark,
-body.no-border .q-date,
-body.no-border .q-date--dark {
-  border: none;
-  box-shadow: none;
-}
-
-body[data-theme=classic] {
-  --q-primary: #673ab7;
-  --q-secondary: #9c27b0;
-  --q-dark-page: #1f2234;
-}
-body[data-theme=classic] [data-theme=classic] .q-card--dark,
-body[data-theme=classic] [data-theme=classic] .q-stepper--dark {
+[data-theme=classic] .q-card--dark,
+[data-theme=classic] .q-stepper--dark {
   background: #333646 !important;
 }
 
-body[data-theme=bitcoin] {
-  --q-primary: #ea611d;
-  --q-secondary: #e56f35;
-  --q-dark-page: #2d293b;
+body[data-theme=classic].body--light {
+  background-color: #f4f4f4;
 }
-body[data-theme=bitcoin] [data-theme=bitcoin] .q-card--dark,
-body[data-theme=bitcoin] [data-theme=bitcoin] .q-stepper--dark {
+
+body[data-theme=classic].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=classic] .bg-primary {
+  background: #673ab7 !important;
+}
+[data-theme=classic] .text-primary {
+  color: #673ab7 !important;
+}
+[data-theme=classic] .bg-secondary {
+  background: #9c27b0 !important;
+}
+[data-theme=classic] .text-secondary {
+  color: #9c27b0 !important;
+}
+[data-theme=classic] .bg-dark {
+  background: #1f2234 !important;
+}
+[data-theme=classic] .text-dark {
+  color: #1f2234 !important;
+}
+[data-theme=classic] .bg-info {
+  background: #333646 !important;
+}
+[data-theme=classic] .text-info {
+  color: #333646 !important;
+}
+[data-theme=classic] .bg-marginal-bg {
+  background: #1f2234 !important;
+}
+[data-theme=classic] .text-marginal-bg {
+  color: #1f2234 !important;
+}
+[data-theme=classic] .bg-marginal-text {
+  background: #fff !important;
+}
+[data-theme=classic] .text-marginal-text {
+  color: #fff !important;
+}
+
+body[data-theme=bitcoin].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=bitcoin].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=bitcoin] .q-drawer--dark,
+body[data-theme=bitcoin].body--dark,
+[data-theme=bitcoin] .q-menu--dark {
+  background: #2d293b !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='bitcoin'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=bitcoin].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=bitcoin] .q-card--dark,
+[data-theme=bitcoin] .q-stepper--dark {
   background: #333646 !important;
 }
 
-body[data-theme=freedom] {
-  --q-primary: #e22156;
-  --q-secondary: #b91a45;
-  --q-dark-page: #462f36;
-}
-body[data-theme=freedom] [data-theme=freedom] .q-card--dark,
-body[data-theme=freedom] [data-theme=freedom] .q-stepper--dark {
-  background: #47393d !important;
+body[data-theme=bitcoin].body--light {
+  background-color: #f4f4f4;
 }
 
-body[data-theme=cyber] {
-  --q-primary: #7cb342;
-  --q-secondary: #558b2f;
-  --q-dark-page: #000;
-}
-body[data-theme=cyber] [data-theme=cyber] .q-card--dark,
-body[data-theme=cyber] [data-theme=cyber] .q-stepper--dark {
-  background: #1f2915 !important;
+body[data-theme=bitcoin].body--light {
+  background-color: #f4f4f4;
 }
 
-body[data-theme=mint] {
-  --q-primary: #3ab77d;
-  --q-secondary: #27b065;
-  --q-dark-page: #1f342b;
+[data-theme=bitcoin] .bg-primary {
+  background: #ea611d !important;
 }
-body[data-theme=mint] [data-theme=mint] .q-card--dark,
-body[data-theme=mint] [data-theme=mint] .q-stepper--dark {
+[data-theme=bitcoin] .text-primary {
+  color: #ea611d !important;
+}
+[data-theme=bitcoin] .bg-secondary {
+  background: #e56f35 !important;
+}
+[data-theme=bitcoin] .text-secondary {
+  color: #e56f35 !important;
+}
+[data-theme=bitcoin] .bg-dark {
+  background: #2d293b !important;
+}
+[data-theme=bitcoin] .text-dark {
+  color: #2d293b !important;
+}
+[data-theme=bitcoin] .bg-info {
+  background: #333646 !important;
+}
+[data-theme=bitcoin] .text-info {
+  color: #333646 !important;
+}
+[data-theme=bitcoin] .bg-marginal-bg {
+  background: #000000 !important;
+}
+[data-theme=bitcoin] .text-marginal-bg {
+  color: #000000 !important;
+}
+[data-theme=bitcoin] .bg-marginal-text {
+  background: #fff !important;
+}
+[data-theme=bitcoin] .text-marginal-text {
+  color: #fff !important;
+}
+
+body[data-theme=freedom].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=freedom].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=freedom] .q-drawer--dark,
+body[data-theme=freedom].body--dark,
+[data-theme=freedom] .q-menu--dark {
+  background: #0a0a0a !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='freedom'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=freedom].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=freedom] .q-card--dark,
+[data-theme=freedom] .q-stepper--dark {
+  background: #1b1b1b !important;
+}
+
+body[data-theme=freedom].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=freedom].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=freedom] .bg-primary {
+  background: #e22156 !important;
+}
+[data-theme=freedom] .text-primary {
+  color: #e22156 !important;
+}
+[data-theme=freedom] .bg-secondary {
+  background: #b91a45 !important;
+}
+[data-theme=freedom] .text-secondary {
+  color: #b91a45 !important;
+}
+[data-theme=freedom] .bg-dark {
+  background: #0a0a0a !important;
+}
+[data-theme=freedom] .text-dark {
+  color: #0a0a0a !important;
+}
+[data-theme=freedom] .bg-info {
+  background: #1b1b1b !important;
+}
+[data-theme=freedom] .text-info {
+  color: #1b1b1b !important;
+}
+[data-theme=freedom] .bg-marginal-bg {
+  background: #2d293b !important;
+}
+[data-theme=freedom] .text-marginal-bg {
+  color: #2d293b !important;
+}
+[data-theme=freedom] .bg-marginal-text {
+  background: #fff !important;
+}
+[data-theme=freedom] .text-marginal-text {
+  color: #fff !important;
+}
+
+body[data-theme=cyber].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=cyber].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=cyber] .q-drawer--dark,
+body[data-theme=cyber].body--dark,
+[data-theme=cyber] .q-menu--dark {
+  background: #0a0a0a !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='cyber'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=cyber].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=cyber] .q-card--dark,
+[data-theme=cyber] .q-stepper--dark {
+  background: #1b1b1b !important;
+}
+
+body[data-theme=cyber].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=cyber].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=cyber] .bg-primary {
+  background: #7cb342 !important;
+}
+[data-theme=cyber] .text-primary {
+  color: #7cb342 !important;
+}
+[data-theme=cyber] .bg-secondary {
+  background: #558b2f !important;
+}
+[data-theme=cyber] .text-secondary {
+  color: #558b2f !important;
+}
+[data-theme=cyber] .bg-dark {
+  background: #0a0a0a !important;
+}
+[data-theme=cyber] .text-dark {
+  color: #0a0a0a !important;
+}
+[data-theme=cyber] .bg-info {
+  background: #1b1b1b !important;
+}
+[data-theme=cyber] .text-info {
+  color: #1b1b1b !important;
+}
+[data-theme=cyber] .bg-marginal-bg {
+  background: #2d293b !important;
+}
+[data-theme=cyber] .text-marginal-bg {
+  color: #2d293b !important;
+}
+[data-theme=cyber] .bg-marginal-text {
+  background: #fff !important;
+}
+[data-theme=cyber] .text-marginal-text {
+  color: #fff !important;
+}
+
+body[data-theme=mint].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=mint].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=mint] .q-drawer--dark,
+body[data-theme=mint].body--dark,
+[data-theme=mint] .q-menu--dark {
+  background: #1f342b !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='mint'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=mint].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=mint] .q-card--dark,
+[data-theme=mint] .q-stepper--dark {
   background: #334642 !important;
 }
 
-body[data-theme=autumn] {
-  --q-primary: #b7763a;
-  --q-secondary: #b07927;
-  --q-dark-page: #34291f;
+body[data-theme=mint].body--light {
+  background-color: #f4f4f4;
 }
-body[data-theme=autumn] [data-theme=autumn] .q-card--dark,
-body[data-theme=autumn] [data-theme=autumn] .q-stepper--dark {
+
+body[data-theme=mint].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=mint] .bg-primary {
+  background: #3ab77d !important;
+}
+[data-theme=mint] .text-primary {
+  color: #3ab77d !important;
+}
+[data-theme=mint] .bg-secondary {
+  background: #27b065 !important;
+}
+[data-theme=mint] .text-secondary {
+  color: #27b065 !important;
+}
+[data-theme=mint] .bg-dark {
+  background: #1f342b !important;
+}
+[data-theme=mint] .text-dark {
+  color: #1f342b !important;
+}
+[data-theme=mint] .bg-info {
+  background: #334642 !important;
+}
+[data-theme=mint] .text-info {
+  color: #334642 !important;
+}
+[data-theme=mint] .bg-marginal-bg {
+  background: #1f342b !important;
+}
+[data-theme=mint] .text-marginal-bg {
+  color: #1f342b !important;
+}
+[data-theme=mint] .bg-marginal-text {
+  background: #fff !important;
+}
+[data-theme=mint] .text-marginal-text {
+  color: #fff !important;
+}
+
+body[data-theme=autumn].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=autumn].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=autumn] .q-drawer--dark,
+body[data-theme=autumn].body--dark,
+[data-theme=autumn] .q-menu--dark {
+  background: #34291f !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='autumn'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=autumn].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=autumn] .q-card--dark,
+[data-theme=autumn] .q-stepper--dark {
   background: #463f33 !important;
 }
 
-body[data-theme=flamingo] {
-  --q-primary: #ff00ff;
-  --q-secondary: #fda3fd;
-  --q-dark-page: #2f032f;
+body[data-theme=autumn].body--light {
+  background-color: #f4f4f4;
 }
-body[data-theme=flamingo] [data-theme=flamingo] .q-card--dark,
-body[data-theme=flamingo] [data-theme=flamingo] .q-stepper--dark {
+
+body[data-theme=autumn].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=autumn] .bg-primary {
+  background: #b7763a !important;
+}
+[data-theme=autumn] .text-primary {
+  color: #b7763a !important;
+}
+[data-theme=autumn] .bg-secondary {
+  background: #b07927 !important;
+}
+[data-theme=autumn] .text-secondary {
+  color: #b07927 !important;
+}
+[data-theme=autumn] .bg-dark {
+  background: #34291f !important;
+}
+[data-theme=autumn] .text-dark {
+  color: #34291f !important;
+}
+[data-theme=autumn] .bg-info {
+  background: #463f33 !important;
+}
+[data-theme=autumn] .text-info {
+  color: #463f33 !important;
+}
+[data-theme=autumn] .bg-marginal-bg {
+  background: #342a1f !important;
+}
+[data-theme=autumn] .text-marginal-bg {
+  color: #342a1f !important;
+}
+[data-theme=autumn] .bg-marginal-text {
+  background: rgb(255, 255, 255) !important;
+}
+[data-theme=autumn] .text-marginal-text {
+  color: rgb(255, 255, 255) !important;
+}
+
+body[data-theme=flamingo].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=flamingo].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=flamingo] .q-drawer--dark,
+body[data-theme=flamingo].body--dark,
+[data-theme=flamingo] .q-menu--dark {
+  background: #2f032f !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='flamingo'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=flamingo].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=flamingo] .q-card--dark,
+[data-theme=flamingo] .q-stepper--dark {
   background: #bc23bc !important;
 }
 
-body[data-theme=monochrome] {
-  --q-primary: #494949;
-  --q-secondary: #6b6b6b;
-  --q-dark-page: #000;
+body[data-theme=flamingo].body--light {
+  background-color: #f4f4f4;
 }
-body[data-theme=monochrome] [data-theme=monochrome] .q-card--dark,
-body[data-theme=monochrome] [data-theme=monochrome] .q-stepper--dark {
+
+body[data-theme=flamingo].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=flamingo] .bg-primary {
+  background: #ff00ff !important;
+}
+[data-theme=flamingo] .text-primary {
+  color: #ff00ff !important;
+}
+[data-theme=flamingo] .bg-secondary {
+  background: #fda3fd !important;
+}
+[data-theme=flamingo] .text-secondary {
+  color: #fda3fd !important;
+}
+[data-theme=flamingo] .bg-dark {
+  background: #2f032f !important;
+}
+[data-theme=flamingo] .text-dark {
+  color: #2f032f !important;
+}
+[data-theme=flamingo] .bg-info {
+  background: #bc23bc !important;
+}
+[data-theme=flamingo] .text-info {
+  color: #bc23bc !important;
+}
+[data-theme=flamingo] .bg-marginal-bg {
+  background: #311231 !important;
+}
+[data-theme=flamingo] .text-marginal-bg {
+  color: #311231 !important;
+}
+[data-theme=flamingo] .bg-marginal-text {
+  background: rgb(255, 255, 255) !important;
+}
+[data-theme=flamingo] .text-marginal-text {
+  color: rgb(255, 255, 255) !important;
+}
+
+body[data-theme=monochrome].body--light {
+  background-color: #f4f4f4;
+}
+
+body[data-theme=monochrome].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=monochrome] .q-drawer--dark,
+body[data-theme=monochrome].body--dark,
+[data-theme=monochrome] .q-menu--dark {
+  background: #000 !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='monochrome'].body--dark {
+  background: scale-color($color, $lightness: -60%);
+}
+*/
+body[data-theme=monochrome].body--light {
+  background-color: #f4f4f4;
+}
+
+[data-theme=monochrome] .q-card--dark,
+[data-theme=monochrome] .q-stepper--dark {
   background: rgb(39, 39, 39) !important;
 }
 
-body[data-theme=salvador] {
-  --q-primary: #1976d2;
-  --q-secondary: #26a69a;
-  --q-dark-page: #253647;
-}
-body[data-theme=salvador] [data-theme=salvador] .q-card--dark,
-body[data-theme=salvador] [data-theme=salvador] .q-stepper--dark {
-  background: #343d47 !important;
+body[data-theme=monochrome].body--light {
+  background-color: #f4f4f4;
 }
 
-body.gradient-bg {
-  background-image: linear-gradient(to bottom right, var(--q-dark-page), #0a0a0a);
-  background-attachment: fixed;
+body[data-theme=monochrome].body--light {
+  background-color: #f4f4f4;
 }
 
-body.bg-image::before {
-  content: "";
-  position: fixed;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  filter: blur(8px);
-  background-image: var(--background);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+[data-theme=monochrome] .bg-primary {
+  background: #494949 !important;
 }
-body.bg-image .q-page-container {
-  backdrop-filter: none; /* Ensure the page content is not affected */
+[data-theme=monochrome] .text-primary {
+  color: #494949 !important;
+}
+[data-theme=monochrome] .bg-secondary {
+  background: #6b6b6b !important;
+}
+[data-theme=monochrome] .text-secondary {
+  color: #6b6b6b !important;
+}
+[data-theme=monochrome] .bg-dark {
+  background: #000 !important;
+}
+[data-theme=monochrome] .text-dark {
+  color: #000 !important;
+}
+[data-theme=monochrome] .bg-info {
+  background: rgb(39, 39, 39) !important;
+}
+[data-theme=monochrome] .text-info {
+  color: rgb(39, 39, 39) !important;
+}
+[data-theme=monochrome] .bg-marginal-bg {
+  background: #000 !important;
+}
+[data-theme=monochrome] .text-marginal-bg {
+  color: #000 !important;
+}
+[data-theme=monochrome] .bg-marginal-text {
+  background: rgb(255, 255, 255) !important;
+}
+[data-theme=monochrome] .text-marginal-text {
+  color: rgb(255, 255, 255) !important;
 }
 
-body.body--dark .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark),
-body.body--dark .q-header,
-body.body--dark .q-drawer {
-  --q-dark: rgba(29, 29, 29, 0.3);
-  background-color: var(--q-dark);
-  backdrop-filter: blur(6px);
+[data-theme=freedom] .q-drawer--dark {
+  background: #0a0a0a !important;
+}
+
+[data-theme=freedom] .q-header {
+  background: #0a0a0a !important;
+}
+
+[data-theme=cyber] .q-drawer--dark {
+  background: #0a0a0a !important;
+}
+
+[data-theme=cyber] .q-header {
+  background: #0a0a0a !important;
+}
+
+[data-theme=salvador] .q-drawer--dark {
+  background: #242424 !important;
+}
+
+[data-theme=salvador] .q-header {
+  background: #0f47af !important;
 }
 
 [v-cloak] {

lnbits/static/js/account.js

@@ -91,6 +91,35 @@ window.AccountPageLogic = {
       window.i18n.global.locale = newValue
       this.$q.localStorage.set('lnbits.lang', newValue)
     },
+    toggleGradient() {
+      this.gradientSelection = !this.gradientChoice
+      this.gradientChoice = this.gradientSelection
+      this.$q.localStorage.set('lnbits.backgroundImage', 'none')
+      this.applyGradient()
+      if (!this.gradientChoice) {
+        window.location.reload()
+      }
+    },
+    reactionChoiceFunc() {
+      this.$q.localStorage.set('lnbits.reactions', this.reactionSelection)
+      this.reactionChoice = this.reactionSelection
+    },
+    bgimageChoiceFunc() {
+      this.$q.localStorage.set('lnbits.backgroundImage', this.bgimageSelection)
+      this.bgimageChoice = this.bgimageSelection
+      this.applyBackgroundImage()
+    },
+    themeChoiceFunc(newValue) {
+      this.changeTheme(newValue)
+      this.setColors()
+      if (this.gradientChoice) {
+        this.applyGradient()
+      }
+      if (this.bgimageChoice) {
+        this.applyBackgroundImage()
+      }
+      this.applyBorder()
+    },
     async updateAccount() {
       try {
         const {data} = await LNbits.api.request(
@@ -397,6 +426,10 @@ window.AccountPageLogic = {
     }
   },
   async created() {
+    this.borderSelection = this.borderChoice
+    this.reactionSelection = this.reactionChoice
+    this.bgimageSelection = this.bgimageChoice
+    this.themeSelection = this.themeChoice
     try {
       const {data} = await LNbits.api.getAuthenticatedUser()
       this.user = data

lnbits/static/js/base.js

@@ -437,6 +437,18 @@ window.LNbits = {
       converter.setFlavor('github')
       converter.setOption('simpleLineBreaks', true)
       return converter.makeHtml(text)
+    },
+    hexToRgb(hex) {
+      return Quasar.colors.hexToRgb(hex)
+    },
+    hexDarken(hex, percent) {
+      return Quasar.colors.lighten(hex, percent)
+    },
+    hexAlpha(hex, alpha) {
+      return Quasar.colors.changeAlpha(hex, alpha)
+    },
+    getPaletteColor(color) {
+      return Quasar.colors.getPaletteColor(color)
     }
   }
 }
@@ -453,6 +465,7 @@ if (!window.g) {
     fiatTracking: false,
     wallets: [],
     payments: [],
+    allowedThemes: null,
     langs: [],
     walletEventListeners: [],
     updatePayments: false,
@@ -469,13 +482,12 @@ window.windowMixin = {
       mobileSimple: true,
       walletFlip: true,
       showAddWalletDialog: {show: false},
-      isUserAuthorized: false,
-      isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
-      allowedThemes: WINDOW_SETTINGS['LNBITS_THEME_OPTIONS'],
-      walletEventListeners: [],
-      darkChoice: this.$q.localStorage.has('lnbits.darkMode')
-        ? this.$q.localStorage.getItem('lnbits.darkMode')
-        : true,
+      borderSelection: null,
+      gradientSelection: null,
+      themeSelection: null,
+      reactionSelection: null,
+      bgimageSelection: null,
+      gradientSelection: false,
       borderChoice: this.$q.localStorage.has('lnbits.border')
         ? this.$q.localStorage.getItem('lnbits.border')
         : USE_DEFAULT_BORDER,
@@ -491,6 +503,10 @@ window.windowMixin = {
       bgimageChoice: this.$q.localStorage.has('lnbits.backgroundImage')
         ? this.$q.localStorage.getItem('lnbits.backgroundImage')
         : USE_DEFAULT_BGIMAGE,
+      isUserAuthorized: false,
+      isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
+      walletEventListeners: [],
+      backgroundImage: '',
       ...WINDOW_SETTINGS
     }
   },
@@ -596,53 +612,139 @@ window.windowMixin = {
     },
     changeTheme(newValue) {
       document.body.setAttribute('data-theme', newValue)
-      this.$q.localStorage.set('lnbits.theme', newValue)
-      this.themeChoice = newValue
+      if (this.themeSelection) {
+        this.themeChoice = newValue
+        this.$q.localStorage.set('lnbits.theme', newValue)
+      }
+      this.setColors()
     },
     applyGradient() {
+      darkBgColor = this.$q.localStorage.getItem('lnbits.darkBgColor')
+      primaryColor = this.$q.localStorage.getItem('lnbits.primaryColor')
       if (this.gradientChoice) {
-        document.body.classList.add('gradient-bg')
         this.$q.localStorage.set('lnbits.gradientBg', true)
-        // Ensure dark mode is enabled when gradient background is applied
         if (!this.$q.dark.isActive) {
-          this.toggleDarkMode()
+          this.$q.dark.toggle()
+          this.$q.localStorage.set('lnbits.darkMode', true)
         }
+        const gradientStyle = `linear-gradient(to bottom right, ${LNbits.utils.hexDarken(String(primaryColor), -70)}, #0a0a0a)`
+        document.body.style.setProperty(
+          'background-image',
+          gradientStyle,
+          'important'
+        )
+        const gradientStyleCards = `background-color: ${LNbits.utils.hexAlpha(String(darkBgColor), 0.4)} !important; backdrop-filter: blur(6px);`
+        const style = document.createElement('style')
+        style.innerHTML =
+          `body[data-theme="${this.themeChoice}"] .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark), body.body${this.$q.dark.isActive ? '--dark' : ''} .q-header, body.body${this.$q.dark.isActive ? '--dark' : ''} .q-drawer { ${gradientStyleCards} }` +
+          `body[data-theme="${this.themeChoice}"].body--dark{background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important; }` +
+          `[data-theme="${this.themeChoice}"] .q-card--dark{background: ${String(darkBgColor)} !important;} }`
+        document.head.appendChild(style)
       } else {
-        document.body.classList.remove('gradient-bg')
         this.$q.localStorage.set('lnbits.gradientBg', false)
       }
     },
-    applyBackgroundImage() {
-      if (this.bgimageChoice == '') {
-        document.body.classList.remove('bg-image')
-      } else {
-        document.body.classList.add('bg-image')
-        document.body.style.setProperty(
-          '--background',
-          `url(${this.bgimageChoice})`
-        )
-      }
-      this.$q.localStorage.set('lnbits.backgroundImage', this.bgimageChoice)
-    },
-    applyBorder() {
-      // Remove any existing border classes
-      document.body.classList.forEach(cls => {
-        if (cls.endsWith('-border')) {
-          document.body.classList.remove(cls)
-        }
-      })
-      this.$q.localStorage.setItem('lnbits.border', this.borderChoice)
-      document.body.classList.add(this.borderChoice)
-    },
     toggleDarkMode() {
       this.$q.dark.toggle()
-      this.darkChoice = this.$q.dark.isActive
       this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
       if (!this.$q.dark.isActive) {
-        this.gradientChoice = false
-        this.applyGradient()
+        this.bgimageSelection = 'null'
+        this.$q.localStorage.set('lnbits.gradientBg', false)
+        this.$q.localStorage.set('lnbits.backgroundImage', 'null')
+        window.location.hash = '#theme'
+        window.location.reload()
       }
     },
+    applyBackgroundImage() {
+      if (this.bgimageSelection) {
+        this.$q.localStorage.set(
+          'lnbits.backgroundImage',
+          this.bgimageSelection
+        )
+        this.bgimageChoice = this.bgimageSelection
+      }
+      if (
+        this.bgimageChoice &&
+        this.bgimageChoice !== 'null' &&
+        this.bgimageChoice !== 'none' &&
+        this.bgimageChoice !== ''
+      ) {
+        this.gradientChoice = true
+        this.applyGradient()
+        const style = document.createElement('style')
+        style.innerHTML = `
+        body[data-theme="${this.themeChoice}"]::before {
+          content: '';
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: url(${this.bgimageChoice});
+          background-size: cover;
+          filter: blur(8px);
+          z-index: -1;
+          background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        }
+        body[data-theme="${this.themeChoice}"] .q-page-container {
+          backdrop-filter: none; /* Ensure the page content is not affected */
+        }`
+        document.head.appendChild(style)
+      }
+    },
+    applyBorder() {
+      if (this.borderSelection) {
+        this.$q.localStorage.setItem('lnbits.border', this.borderSelection)
+        this.borderChoice = this.$q.localStorage.getItem('lnbits.border')
+      }
+      let borderStyleCSS
+      if (this.borderChoice == 'hard-border') {
+        borderStyleCSS = `box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px #ffffff47; border: none;`
+      }
+      if (this.borderChoice == 'neon-border') {
+        borderStyleCSS = `border: 2px solid ${this.$q.localStorage.getItem('lnbits.primaryColor')}; box-shadow: none;`
+      }
+      if (this.borderChoice == 'no-border') {
+        borderStyleCSS = `box-shadow: none; border: none;`
+      }
+      if (this.borderChoice == 'retro-border') {
+        borderStyleCSS = `border: none; border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2), 0 2px 2px rgba(255, 255, 255, 0.14), 0 3px 1px -2px rgba(255, 255, 255, 0.12);`
+      }
+      let style = document.createElement('style')
+      style.innerHTML = `
+        body[data-theme="${this.themeChoice}"] .q-card,
+        body[data-theme="${this.themeChoice}"] .q-card.q-card--dark,
+        body[data-theme="${this.themeChoice}"] .q-date,
+        body[data-theme="${this.themeChoice}"] .q-date--dark {
+          ${borderStyleCSS}
+        }
+      `
+      document.head.appendChild(style)
+    },
+    setColors() {
+      this.$q.localStorage.set(
+        'lnbits.primaryColor',
+        LNbits.utils.getPaletteColor('primary')
+      )
+      this.$q.localStorage.set(
+        'lnbits.secondaryColor',
+        LNbits.utils.getPaletteColor('secondary')
+      )
+      this.$q.localStorage.set(
+        'lnbits.darkBgColor',
+        LNbits.utils.getPaletteColor('dark')
+      )
+      document.documentElement.style.setProperty(
+        '--q-primary',
+        LNbits.utils.getPaletteColor('primary')
+      )
+      document.documentElement.style.setProperty(
+        '--q-secondary',
+        LNbits.utils.getPaletteColor('secondary')
+      )
+    },
     copyText(text, message, position) {
       Quasar.copyToClipboard(text).then(() => {
         Quasar.Notify.create({
@@ -706,7 +808,10 @@ window.windowMixin = {
         const gradient = params.get('gradient')
         const border = params.get('border')
 
-        if (theme && this.allowedThemes.includes(theme.trim().toLowerCase())) {
+        if (
+          theme &&
+          this.g.allowedThemes.includes(theme.trim().toLowerCase())
+        ) {
           const normalizedTheme = theme.trim().toLowerCase()
           document.body.setAttribute('data-theme', normalizedTheme)
           this.$q.localStorage.set('lnbits.theme', normalizedTheme)
@@ -736,6 +841,8 @@ window.windowMixin = {
 
         window.history.replaceState(null, null, url.pathname)
       }
+
+      this.setColors()
     },
     refreshRoute() {
       const path = window.location.pathname
@@ -747,6 +854,7 @@ window.windowMixin = {
     }
   },
   async created() {
+    this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
     this.$q.dark.set(
       this.$q.localStorage.has('lnbits.darkMode')
         ? this.$q.localStorage.getItem('lnbits.darkMode')

lnbits/static/js/wallet.js

@@ -115,6 +115,8 @@ window.WalletPageLogic = {
       isFiatPriority: false,
       formattedFiatAmount: 0,
       formattedExchange: null,
+      primaryColor: this.$q.localStorage.getItem('lnbits.primaryColor'),
+      secondaryColor: this.$q.localStorage.getItem('lnbits.secondaryColor'),
       chartData: [],
       chartDataPointCount: 0,
       chartConfig: {
@@ -968,11 +970,11 @@ window.WalletPageLogic = {
                     label: 'Balance',
                     data: data.map(s => s.balance),
                     pointStyle: false,
-                    backgroundColor: Quasar.colors.changeAlpha(
-                      Quasar.colors.getPaletteColor('primary'),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.primaryColor,
                       0.3
                     ),
-                    borderColor: Quasar.colors.getPaletteColor('primary'),
+                    borderColor: this.primaryColor,
                     borderWidth: 2,
                     fill: true,
                     tension: 0.7,
@@ -982,11 +984,11 @@ window.WalletPageLogic = {
                     label: 'Fees',
                     data: data.map(s => s.fee),
                     pointStyle: false,
-                    backgroundColor: Quasar.colors.changeAlpha(
-                      Quasar.colors.getPaletteColor('secondary'),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.secondaryColor,
                       0.3
                     ),
-                    borderColor: Quasar.colors.getPaletteColor('secondary'),
+                    borderColor: this.secondaryColor,
                     borderWidth: 1,
                     fill: true,
                     tension: 0.7,
@@ -1027,8 +1029,8 @@ window.WalletPageLogic = {
                     label: 'Balance In',
                     borderRadius: 5,
                     data: data.map(s => s.balance_in),
-                    backgroundColor: Quasar.colors.changeAlpha(
-                      Quasar.colors.getPaletteColor('primary'),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.primaryColor,
                       0.3
                     )
                   },
@@ -1036,8 +1038,8 @@ window.WalletPageLogic = {
                     label: 'Balance Out',
                     borderRadius: 5,
                     data: data.map(s => s.balance_out),
-                    backgroundColor: Quasar.colors.changeAlpha(
-                      Quasar.colors.getPaletteColor('secondary'),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.secondaryColor,
                       0.3
                     )
                   }
@@ -1076,16 +1078,16 @@ window.WalletPageLogic = {
                   {
                     label: 'Payments In',
                     data: data.map(s => s.count_in),
-                    backgroundColor: Quasar.colors.changeAlpha(
-                      Quasar.colors.getPaletteColor('primary'),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.primaryColor,
                       0.3
                     )
                   },
                   {
                     label: 'Payments Out',
                     data: data.map(s => -s.count_out),
-                    backgroundColor: Quasar.colors.changeAlpha(
-                      Quasar.colors.getPaletteColor('secondary'),
+                    backgroundColor: LNbits.utils.hexAlpha(
+                      this.secondaryColor,
                       0.3
                     )
                   }

lnbits/static/scss/background.scss

@@ -1,62 +0,0 @@
-@use 'sass:color';
-
-@each $theme, $colors in $themes {
-  body[data-theme='#{$theme}'] {
-    @each $name, $color in $colors {
-      @if $name== 'dark' {
-        --q-dark-page: #{$color};
-      }
-      @if $name== 'primary' {
-        --q-primary: #{$color};
-      }
-      @if $name== 'secondary' {
-        --q-secondary: #{$color};
-      }
-      @if $name== 'info' {
-        [data-theme='#{$theme}'] .q-card--dark,
-        [data-theme='#{$theme}'] .q-stepper--dark {
-          background: $color !important;
-        }
-      }
-    }
-  }
-}
-
-body.gradient-bg {
-  background-image: linear-gradient(
-    to bottom right,
-    var(--q-dark-page),
-    #0a0a0a
-  );
-  background-attachment: fixed;
-}
-
-body.bg-image {
-  &::before {
-    content: '';
-    position: fixed;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    filter: blur(8px);
-    background-image: var(--background);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-  .q-page-container {
-    backdrop-filter: none; /* Ensure the page content is not affected */
-  }
-}
-// transparent background for specific elements
-body.body--dark {
-  .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark),
-  .q-header,
-  .q-drawer {
-    --q-dark: #{color.adjust(#1d1d1d, $alpha: -0.7)};
-    background-color: var(--q-dark);
-    backdrop-filter: blur(6px);
-  }
-}

lnbits/static/scss/base.scss

@@ -1,6 +1,130 @@
-@import 'themes';
-@import 'borders';
-@import 'background';
+$themes: (
+  'classic': (
+    primary: #673ab7,
+    secondary: #9c27b0,
+    dark: #1f2234,
+    info: #333646,
+    marginal-bg: #1f2234,
+    marginal-text: #fff
+  ),
+  'bitcoin': (
+    primary: #ea611d,
+    secondary: #e56f35,
+    dark: #2d293b,
+    info: #333646,
+    marginal-bg: #000000,
+    marginal-text: #fff
+  ),
+  'freedom': (
+    primary: #e22156,
+    secondary: #b91a45,
+    dark: #0a0a0a,
+    info: #1b1b1b,
+    marginal-bg: #2d293b,
+    marginal-text: #fff
+  ),
+  'cyber': (
+    primary: #7cb342,
+    secondary: #558b2f,
+    dark: #0a0a0a,
+    info: #1b1b1b,
+    marginal-bg: #2d293b,
+    marginal-text: #fff
+  ),
+  'mint': (
+    primary: #3ab77d,
+    secondary: #27b065,
+    dark: #1f342b,
+    info: #334642,
+    marginal-bg: #1f342b,
+    marginal-text: #fff
+  ),
+  'autumn': (
+    primary: #b7763a,
+    secondary: #b07927,
+    dark: #34291f,
+    info: #463f33,
+    marginal-bg: #342a1f,
+    marginal-text: rgb(255, 255, 255)
+  ),
+  'flamingo': (
+    primary: #ff00ff,
+    secondary: #fda3fd,
+    dark: #2f032f,
+    info: #bc23bc,
+    marginal-bg: #311231,
+    marginal-text: rgb(255, 255, 255)
+  ),
+  'monochrome': (
+    primary: #494949,
+    secondary: #6b6b6b,
+    dark: #000,
+    info: rgb(39, 39, 39),
+    marginal-bg: #000,
+    marginal-text: rgb(255, 255, 255)
+  )
+);
+@each $theme, $colors in $themes {
+  @each $name, $color in $colors {
+    @if $name== 'dark' {
+      [data-theme='#{$theme}'] .q-drawer--dark,
+      body[data-theme='#{$theme}'].body--dark,
+      [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%);
+      }
+      */
+    } @else {
+      body[data-theme='#{$theme}'].body--light {
+        background-color: #f4f4f4;
+      }
+    }
+    @if $name== 'info' {
+      [data-theme='#{$theme}'] .q-card--dark,
+      [data-theme='#{$theme}'] .q-stepper--dark {
+        background: $color !important;
+      }
+    }
+  }
+  [data-theme='#{$theme}'] {
+    @each $name, $color in $colors {
+      .bg-#{$name} {
+        background: $color !important;
+      }
+      .text-#{$name} {
+        color: $color !important;
+      }
+    }
+  }
+}
+
+[data-theme='freedom'] .q-drawer--dark {
+  background: #0a0a0a !important;
+}
+
+[data-theme='freedom'] .q-header {
+  background: #0a0a0a !important;
+}
+
+[data-theme='cyber'] .q-drawer--dark {
+  background: #0a0a0a !important;
+}
+
+[data-theme='cyber'] .q-header {
+  background: #0a0a0a !important;
+}
+
+[data-theme='salvador'] .q-drawer--dark {
+  background: #242424 !important;
+}
+
+[data-theme='salvador'] .q-header {
+  background: #0f47af !important;
+}
 
 [v-cloak] {
   display: none;

lnbits/static/scss/borders.scss

@@ -1,49 +0,0 @@
-@each $theme, $colors in $themes {
-  @each $name, $color in $colors {
-    @if $name== 'primary' {
-      body[data-theme='#{$theme}'].neon-border {
-        .q-card,
-        .q-card.q-card--dark,
-        .q-date,
-        .q-date--dark {
-          border: 2px solid $color;
-          box-shadow: none;
-        }
-      }
-    }
-  }
-}
-
-body.hard-border {
-  .q-card,
-  .q-card.q-card--dark,
-  .q-date,
-  .q-date--dark {
-    box-shadow:
-      0 0 0 1px rgba(0, 0, 0, 0.12),
-      0 0 0 1px #ffffff47;
-    border: none;
-  }
-}
-body.retro-border {
-  .q-card,
-  .q-card.q-card--dark,
-  .q-date,
-  .q-date--dark {
-    border: none;
-    box-shadow:
-      0 1px 5px rgba(255, 255, 255, 0.2),
-      0 2px 2px rgba(255, 255, 255, 0.14),
-      0 3px 1px -2px rgba(255, 255, 255, 0.12);
-  }
-}
-
-body.no-border {
-  .q-card,
-  .q-card.q-card--dark,
-  .q-date,
-  .q-date--dark {
-    border: none;
-    box-shadow: none;
-  }
-}

lnbits/static/scss/themes.scss

@@ -1,74 +0,0 @@
-$themes: (
-  'classic': (
-    primary: #673ab7,
-    secondary: #9c27b0,
-    dark: #1f2234,
-    info: #333646,
-    marginal-bg: #1f2234,
-    marginal-text: #fff
-  ),
-  'bitcoin': (
-    primary: #ea611d,
-    secondary: #e56f35,
-    dark: #2d293b,
-    info: #333646,
-    marginal-bg: #000000,
-    marginal-text: #fff
-  ),
-  'freedom': (
-    primary: #e22156,
-    secondary: #b91a45,
-    dark: #462f36,
-    info: #47393d,
-    marginal-bg: #2d293b,
-    marginal-text: #fff
-  ),
-  'cyber': (
-    primary: #7cb342,
-    secondary: #558b2f,
-    dark: #000,
-    info: #1f2915,
-    marginal-bg: #2d293b,
-    marginal-text: #fff
-  ),
-  'mint': (
-    primary: #3ab77d,
-    secondary: #27b065,
-    dark: #1f342b,
-    info: #334642,
-    marginal-bg: #1f342b,
-    marginal-text: #fff
-  ),
-  'autumn': (
-    primary: #b7763a,
-    secondary: #b07927,
-    dark: #34291f,
-    info: #463f33,
-    marginal-bg: #342a1f,
-    marginal-text: rgb(255, 255, 255)
-  ),
-  'flamingo': (
-    primary: #ff00ff,
-    secondary: #fda3fd,
-    dark: #2f032f,
-    info: #bc23bc,
-    marginal-bg: #311231,
-    marginal-text: rgb(255, 255, 255)
-  ),
-  'monochrome': (
-    primary: #494949,
-    secondary: #6b6b6b,
-    dark: #000,
-    info: rgb(39, 39, 39),
-    marginal-bg: #000,
-    marginal-text: rgb(255, 255, 255)
-  ),
-  'salvador': (
-    primary: #1976d2,
-    secondary: #26a69a,
-    dark: #253647,
-    info: #343d47,
-    marginal-bg: #0d1620,
-    marginal-text: rgb(255, 255, 255)
-  )
-);

lnbits/templates/base.html

@@ -423,6 +423,9 @@
       Object.keys(WINDOW_SETTINGS).forEach(key => {
         window[key] = WINDOW_SETTINGS[key]
       })
+      if (LNBITS_THEME_OPTIONS && LNBITS_THEME_OPTIONS.length) {
+        window.allowedThemes = LNBITS_THEME_OPTIONS.map(str => str.trim())
+      }
     </script>
     {% include('components.vue') %} {% block vue_templates %}{% endblock %} {%
     for url in INCLUDED_JS %}

lnbits/templates/print.html

@@ -49,6 +49,9 @@
       Object.keys(WINDOW_SETTINGS).forEach(key => {
         window[key] = WINDOW_SETTINGS[key]
       })
+      if (LNBITS_THEME_OPTIONS && LNBITS_THEME_OPTIONS.length) {
+        window.allowedThemes = LNBITS_THEME_OPTIONS.map(str => str.trim())
+      }
     </script>
     {% include('components.vue') %}{% block vue_templates %}{% endblock %} {%
     for url in INCLUDED_JS %}

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "lnbits"
-version = "1.2.1"
+version = "1.2.0-rc3"
 description = "LNbits, free and open-source Lightning wallet and accounts system."
 authors = ["Alan Bits <alan@lnbits.com>"]
 readme = "README.md"