refactor: theme options, includes fix bg on firefox with dialog (#3247)

Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/core/templates/core/account.html

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

lnbits/static/css/base.css

@@ -1,617 +1,200 @@
-body[data-theme=classic].body--light {
+body[data-theme=classic].neon-border .q-card,
-  background-color: #f4f4f4;
+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 {
+body[data-theme=bitcoin].neon-border .q-card,
-  background-color: #f4f4f4;
+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;
 }
 
-[data-theme=classic] .q-drawer--dark,
+body[data-theme=freedom].neon-border .q-card,
-body[data-theme=classic].body--dark,
+body[data-theme=freedom].neon-border .q-card.q-card--dark,
-[data-theme=classic] .q-menu--dark {
+body[data-theme=freedom].neon-border .q-date,
-  background: #1f2234 !important;
+body[data-theme=freedom].neon-border .q-date--dark {
+  border: 2px solid #e22156;
+  box-shadow: none;
 }
 
-/* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
+body[data-theme=cyber].neon-border .q-card,
-// set a darker body bg for all themes, when in "dark mode"
+body[data-theme=cyber].neon-border .q-card.q-card--dark,
-body[data-theme='classic'].body--dark {
+body[data-theme=cyber].neon-border .q-date,
-  background: scale-color($color, $lightness: -60%);
+body[data-theme=cyber].neon-border .q-date--dark {
-}
+  border: 2px solid #7cb342;
-*/
+  box-shadow: none;
-body[data-theme=classic].body--light {
-  background-color: #f4f4f4;
 }
 
-[data-theme=classic] .q-card--dark,
+body[data-theme=mint].neon-border .q-card,
-[data-theme=classic] .q-stepper--dark {
+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.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 {
   background: #333646 !important;
 }
 
-body[data-theme=classic].body--light {
+body[data-theme=bitcoin] {
-  background-color: #f4f4f4;
+  --q-primary: #ea611d;
+  --q-secondary: #e56f35;
+  --q-dark-page: #2d293b;
 }
-
+body[data-theme=bitcoin] [data-theme=bitcoin] .q-card--dark,
-body[data-theme=classic].body--light {
+body[data-theme=bitcoin] [data-theme=bitcoin] .q-stepper--dark {
-  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=bitcoin].body--light {
+body[data-theme=freedom] {
-  background-color: #f4f4f4;
+  --q-primary: #e22156;
+  --q-secondary: #b91a45;
+  --q-dark-page: #0a0a0a;
 }
-
+body[data-theme=freedom] [data-theme=freedom] .q-card--dark,
-body[data-theme=bitcoin].body--light {
+body[data-theme=freedom] [data-theme=freedom] .q-stepper--dark {
-  background-color: #f4f4f4;
-}
-
-[data-theme=bitcoin] .bg-primary {
-  background: #ea611d !important;
-}
-[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 {
+body[data-theme=cyber] {
-  background-color: #f4f4f4;
+  --q-primary: #7cb342;
+  --q-secondary: #558b2f;
+  --q-dark-page: #0a0a0a;
 }
-
+body[data-theme=cyber] [data-theme=cyber] .q-card--dark,
-body[data-theme=freedom].body--light {
+body[data-theme=cyber] [data-theme=cyber] .q-stepper--dark {
-  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 {
+body[data-theme=mint] {
-  background-color: #f4f4f4;
+  --q-primary: #3ab77d;
+  --q-secondary: #27b065;
+  --q-dark-page: #1f342b;
 }
-
+body[data-theme=mint] [data-theme=mint] .q-card--dark,
-body[data-theme=cyber].body--light {
+body[data-theme=mint] [data-theme=mint] .q-stepper--dark {
-  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=mint].body--light {
+body[data-theme=autumn] {
-  background-color: #f4f4f4;
+  --q-primary: #b7763a;
+  --q-secondary: #b07927;
+  --q-dark-page: #34291f;
 }
-
+body[data-theme=autumn] [data-theme=autumn] .q-card--dark,
-body[data-theme=mint].body--light {
+body[data-theme=autumn] [data-theme=autumn] .q-stepper--dark {
-  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=autumn].body--light {
+body[data-theme=flamingo] {
-  background-color: #f4f4f4;
+  --q-primary: #ff00ff;
+  --q-secondary: #fda3fd;
+  --q-dark-page: #2f032f;
 }
-
+body[data-theme=flamingo] [data-theme=flamingo] .q-card--dark,
-body[data-theme=autumn].body--light {
+body[data-theme=flamingo] [data-theme=flamingo] .q-stepper--dark {
-  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=flamingo].body--light {
+body[data-theme=monochrome] {
-  background-color: #f4f4f4;
+  --q-primary: #494949;
+  --q-secondary: #6b6b6b;
+  --q-dark-page: #000;
 }
-
+body[data-theme=monochrome] [data-theme=monochrome] .q-card--dark,
-body[data-theme=flamingo].body--light {
+body[data-theme=monochrome] [data-theme=monochrome] .q-stepper--dark {
-  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=monochrome].body--light {
+body.gradient-bg {
-  background-color: #f4f4f4;
+  background-image: linear-gradient(to bottom right, var(--q-dark-page), #0a0a0a);
+  background-attachment: fixed;
 }
 
-body[data-theme=monochrome].body--light {
+body.bg-image::before {
-  background-color: #f4f4f4;
+  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;
+}
+body.bg-image .q-page-container {
+  backdrop-filter: none; /* Ensure the page content is not affected */
 }
 
-[data-theme=monochrome] .bg-primary {
+body.body--dark .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark),
-  background: #494949 !important;
+body.body--dark .q-header,
-}
+body.body--dark .q-drawer {
-[data-theme=monochrome] .text-primary {
+  --q-dark: rgba(29, 29, 29, 0.3);
-  color: #494949 !important;
+  background-color: var(--q-dark);
-}
+  backdrop-filter: blur(6px);
-[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;
-}
-
-[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,35 +91,6 @@ 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(
@@ -426,10 +397,6 @@ 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,18 +437,6 @@ 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)
     }
   }
 }
@@ -465,7 +453,6 @@ if (!window.g) {
     fiatTracking: false,
     wallets: [],
     payments: [],
-    allowedThemes: null,
     langs: [],
     walletEventListeners: [],
     updatePayments: false,
@@ -482,12 +469,13 @@ window.windowMixin = {
       mobileSimple: true,
       walletFlip: true,
       showAddWalletDialog: {show: false},
-      borderSelection: null,
+      isUserAuthorized: false,
-      gradientSelection: null,
+      isSatsDenomination: WINDOW_SETTINGS['LNBITS_DENOMINATION'] == 'sats',
-      themeSelection: null,
+      allowedThemes: WINDOW_SETTINGS['LNBITS_THEME_OPTIONS'],
-      reactionSelection: null,
+      walletEventListeners: [],
-      bgimageSelection: null,
+      darkChoice: this.$q.localStorage.has('lnbits.darkMode')
-      gradientSelection: false,
+        ? this.$q.localStorage.getItem('lnbits.darkMode')
+        : true,
       borderChoice: this.$q.localStorage.has('lnbits.border')
         ? this.$q.localStorage.getItem('lnbits.border')
         : USE_DEFAULT_BORDER,
@@ -503,10 +491,6 @@ 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
     }
   },
@@ -612,138 +596,52 @@ window.windowMixin = {
     },
     changeTheme(newValue) {
       document.body.setAttribute('data-theme', newValue)
-      if (this.themeSelection) {
+      this.$q.localStorage.set('lnbits.theme', newValue)
-        this.themeChoice = newValue
+      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.$q.dark.toggle()
+          this.toggleDarkMode()
-          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)
       }
     },
-    toggleDarkMode() {
-      this.$q.dark.toggle()
-      this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
-      if (!this.$q.dark.isActive) {
-        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) {
+      if (this.bgimageChoice == '') {
-        this.$q.localStorage.set(
+        document.body.classList.remove('bg-image')
-          'lnbits.backgroundImage',
+      } else {
-          this.bgimageSelection
+        document.body.classList.add('bg-image')
+        document.body.style.setProperty(
+          '--background',
+          `url(${this.bgimageChoice})`
         )
-        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)
       }
+      this.$q.localStorage.set('lnbits.backgroundImage', this.bgimageChoice)
     },
     applyBorder() {
-      if (this.borderSelection) {
+      // Remove any existing border classes
-        this.$q.localStorage.setItem('lnbits.border', this.borderSelection)
+      document.body.classList.forEach(cls => {
-        this.borderChoice = this.$q.localStorage.getItem('lnbits.border')
+        if (cls.endsWith('-border')) {
-      }
+          document.body.classList.remove(cls)
-      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)
+      this.$q.localStorage.setItem('lnbits.border', this.borderChoice)
+      document.body.classList.add(this.borderChoice)
     },
-    setColors() {
+    toggleDarkMode() {
-      this.$q.localStorage.set(
+      this.$q.dark.toggle()
-        'lnbits.primaryColor',
+      this.darkChoice = this.$q.dark.isActive
-        LNbits.utils.getPaletteColor('primary')
+      this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
-      )
+      if (!this.$q.dark.isActive) {
-      this.$q.localStorage.set(
+        this.gradientChoice = false
-        'lnbits.secondaryColor',
+        this.applyGradient()
-        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(() => {
@@ -808,10 +706,7 @@ window.windowMixin = {
         const gradient = params.get('gradient')
         const border = params.get('border')
 
-        if (
+        if (theme && this.allowedThemes.includes(theme.trim().toLowerCase())) {
-          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)
@@ -841,8 +736,6 @@ window.windowMixin = {
 
         window.history.replaceState(null, null, url.pathname)
       }
-
-      this.setColors()
     },
     refreshRoute() {
       const path = window.location.pathname
@@ -854,7 +747,6 @@ 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,8 +115,6 @@ 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: {
@@ -970,11 +968,11 @@ window.WalletPageLogic = {
                     label: 'Balance',
                     data: data.map(s => s.balance),
                     pointStyle: false,
-                    backgroundColor: LNbits.utils.hexAlpha(
+                    backgroundColor: Quasar.colors.changeAlpha(
-                      this.primaryColor,
+                      Quasar.colors.getPaletteColor('primary'),
                       0.3
                     ),
-                    borderColor: this.primaryColor,
+                    borderColor: Quasar.colors.getPaletteColor('primary'),
                     borderWidth: 2,
                     fill: true,
                     tension: 0.7,
@@ -984,11 +982,11 @@ window.WalletPageLogic = {
                     label: 'Fees',
                     data: data.map(s => s.fee),
                     pointStyle: false,
-                    backgroundColor: LNbits.utils.hexAlpha(
+                    backgroundColor: Quasar.colors.changeAlpha(
-                      this.secondaryColor,
+                      Quasar.colors.getPaletteColor('secondary'),
                       0.3
                     ),
-                    borderColor: this.secondaryColor,
+                    borderColor: Quasar.colors.getPaletteColor('secondary'),
                     borderWidth: 1,
                     fill: true,
                     tension: 0.7,
@@ -1029,8 +1027,8 @@ window.WalletPageLogic = {
                     label: 'Balance In',
                     borderRadius: 5,
                     data: data.map(s => s.balance_in),
-                    backgroundColor: LNbits.utils.hexAlpha(
+                    backgroundColor: Quasar.colors.changeAlpha(
-                      this.primaryColor,
+                      Quasar.colors.getPaletteColor('primary'),
                       0.3
                     )
                   },
@@ -1038,8 +1036,8 @@ window.WalletPageLogic = {
                     label: 'Balance Out',
                     borderRadius: 5,
                     data: data.map(s => s.balance_out),
-                    backgroundColor: LNbits.utils.hexAlpha(
+                    backgroundColor: Quasar.colors.changeAlpha(
-                      this.secondaryColor,
+                      Quasar.colors.getPaletteColor('secondary'),
                       0.3
                     )
                   }
@@ -1078,16 +1076,16 @@ window.WalletPageLogic = {
                   {
                     label: 'Payments In',
                     data: data.map(s => s.count_in),
-                    backgroundColor: LNbits.utils.hexAlpha(
+                    backgroundColor: Quasar.colors.changeAlpha(
-                      this.primaryColor,
+                      Quasar.colors.getPaletteColor('primary'),
                       0.3
                     )
                   },
                   {
                     label: 'Payments Out',
                     data: data.map(s => -s.count_out),
-                    backgroundColor: LNbits.utils.hexAlpha(
+                    backgroundColor: Quasar.colors.changeAlpha(
-                      this.secondaryColor,
+                      Quasar.colors.getPaletteColor('secondary'),
                       0.3
                     )
                   }

lnbits/static/scss/background.scss

@@ -0,0 +1,62 @@
+@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,130 +1,6 @@
-$themes: (
+@import 'themes';
-  'classic': (
+@import 'borders';
-    primary: #673ab7,
+@import 'background';
-    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

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

@@ -0,0 +1,66 @@
+$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)
+  )
+);

lnbits/templates/base.html

@@ -423,9 +423,6 @@
       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,9 +49,6 @@
       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 %}