Merge pull request #603 from lnbits/offTheme

Adds Freedom theme to celebrate Oslo Freedom Forum

.env.example

@@ -32,8 +32,8 @@ LNBITS_SERVICE_FEE="0.0"
 LNBITS_SITE_TITLE="LNbits"
 LNBITS_SITE_TAGLINE="free and open-source lightning wallet"
 LNBITS_SITE_DESCRIPTION="Some description about your service, will display if title is not 'LNbits'"
-# Choose from mint, flamingo, salvador, autumn, monochrome, classic
+# Choose from mint, flamingo, freedom, salvador, autumn, monochrome, classic
-LNBITS_THEME_OPTIONS="classic, bitcoin, flamingo, mint, autumn, monochrome, salvador"
+LNBITS_THEME_OPTIONS="classic, bitcoin, freedom, mint, autumn, monochrome, salvador"
 
 # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet,
 #             LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet, FakeWallet

lnbits/static/scss/base.scss

@@ -1,63 +1,14 @@
-$themes: (
+$themes: ( 'classic': ( primary: #673ab7, secondary: #9c27b0, dark: #1f2234, info: #333646, marginal-bg: #1f2234, marginal-text: #fff), 'bitcoin': ( primary: #ff9853, secondary: #ff7353, dark: #2d293b, info: #333646, marginal-bg: #2d293b, marginal-text: #fff), 'freedom': ( primary: #e22156, secondary: #b91a45, 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: #d11d53, secondary: #db3e6d, dark: #803a45, info: #ec7599, marginal-bg: #803a45, 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)));
-  'classic': (
+@each $theme,
-    primary: #673ab7,
+$colors in $themes {
-    secondary: #9c27b0,
+    @each $name,
-    dark: #1f2234,
+    $color in $colors {
-    info: #333646,
-    marginal-bg: #1f2234,
-    marginal-text: #fff
-  ),
-  'bitcoin': (
-    primary: #ff9853,
-    secondary: #ff7353,
-    dark: #2d293b,
-    info: #333646,
-    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: #d11d53,
-    secondary: #db3e6d,
-    dark: #803a45,
-    info: #ec7599,
-    marginal-bg: #803a45,
-    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 {
@@ -73,7 +24,8 @@ $themes: (
         }
     }
     [data-theme='#{$theme}'] {
-    @each $name, $color in $colors {
+        @each $name,
+        $color in $colors {
             .bg-#{$name} {
                 background: $color !important;
             }
@@ -83,6 +35,15 @@ $themes: (
         }
     }
 }
+
+[data-theme='freedom'] .q-drawer--dark {
+    background: #0a0a0a !important;
+}
+
+[data-theme='freedom'] .q-header {
+    background: #0a0a0a !important;
+}
+
 [data-theme='salvador'] .q-drawer--dark {
     background: #242424 !important;
 }
@@ -119,7 +80,6 @@ body.body--dark .q-field--error {
     padding-bottom: 5px !important;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
-
     &.q-item--active {
         color: inherit;
         font-weight: bold;
@@ -136,7 +96,6 @@ body.body--dark .q-field--error {
     .q-table__bottom {
         padding-left: 6px !important;
     }
-
     th:last-child,
     td:last-child,
     .q-table__bottom {
@@ -150,13 +109,11 @@ a.inherit {
 }
 
 // QR video
-
 video {
     border-radius: 3px;
 }
 
 // Material icons font
-
 @font-face {
     font-family: 'Material Icons';
     font-style: normal;

lnbits/templates/base.html

@@ -7,7 +7,6 @@
     {% endfor %}
     <!---->
     <link rel="stylesheet" type="text/css" href="/static/css/base.css" />
-
     {% block styles %}{% endblock %}
     <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
     <meta charset="utf-8" />
@@ -118,6 +117,16 @@
                 size="md"
                 ><q-tooltip>elSalvador</q-tooltip>
               </q-btn>
+              <q-btn
+                v-if="g.allowedThemes.includes('freedom')"
+                dense
+                flat
+                @click="changeColor('freedom')"
+                icon="format_color_fill"
+                color="pink-13"
+                size="md"
+                ><q-tooltip>Freedom</q-tooltip>
+              </q-btn>
               <q-btn
                 v-if="g.allowedThemes.includes('flamingo')"
                 dense