feat: frontend gradient option (#2561)

---------

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

lnbits/core/templates/core/account.html

@@ -373,6 +373,27 @@
                     </q-btn>
                   </div>
                 </div>
+                <div class="row q-mb-md">
+                  <div class="col-4">
+                    <span v-text="$t('gradient_background')"></span>
+                  </div>
+                  <div class="col-8">
+                    <q-btn
+                      dense
+                      flat
+                      round
+                      @click="toggleGradient"
+                      icon="gradient"
+                      size="sm"
+                      v-model="gradientChoice"
+                    >
+                      <q-tooltip
+                        ><span v-text="$t('toggle_gradient')"></span
+                      ></q-tooltip>
+                    </q-btn>
+                  </div>
+                </div>
+
                 <div class="row q-mb-md">
                   <div class="col-4">
                     <span v-text="$t('toggle_darkmode')"></span>

lnbits/static/i18n/en.js

@@ -241,6 +241,8 @@ window.localisation.en = {
   back: 'Back',
   logout: 'Logout',
   look_and_feel: 'Look and Feel',
+  toggle_gradient: 'Toggle Gradient',
+  gradient_background: 'Gradient Background',
   language: 'Language',
   color_scheme: 'Color Scheme',
   extension_cost: 'This release requires a payment of minimum %{cost} sats.',

lnbits/static/js/account.js

@@ -32,6 +32,42 @@ new Vue({
     toggleDarkMode: function () {
       this.$q.dark.toggle()
       this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
+      if (!this.$q.dark.isActive && this.gradientChoice) {
+        this.toggleGradient()
+      }
+    },
+    applyGradient: function () {
+      darkBgColor = this.$q.localStorage.getItem('lnbits.darkBgColor')
+      primaryColor = this.$q.localStorage.getItem('lnbits.primaryColor')
+      if (this.gradientChoice) {
+        if (!this.$q.dark.isActive) {
+          this.toggleDarkMode()
+        }
+        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`
+        const style = document.createElement('style')
+        style.innerHTML =
+          `body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .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.$q.localStorage.getItem('lnbits.theme')}"].body--dark{background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important; }` +
+          `[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card--dark{background: ${String(darkBgColor)} !important;} }`
+        document.head.appendChild(style)
+        this.$q.localStorage.set('lnbits.gradientBg', true)
+      } else {
+        this.$q.localStorage.set('lnbits.gradientBg', false)
+      }
+    },
+    toggleGradient: function () {
+      this.gradientChoice = !this.gradientChoice
+      this.applyGradient()
+      if (!this.gradientChoice) {
+        window.location.reload()
+      }
+      this.gradientChoice = this.$q.localStorage.getItem('lnbits.gradientBg')
     },
     reactionChoiceFunc: function () {
       this.$q.localStorage.set('lnbits.reactions', this.reactionChoice)
@@ -39,6 +75,24 @@ new Vue({
     changeColor: function (newValue) {
       document.body.setAttribute('data-theme', newValue)
       this.$q.localStorage.set('lnbits.theme', newValue)
+      this.setColors()
+      if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
+        this.applyGradient()
+      }
+    },
+    setColors: function () {
+      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')
+      )
     },
     updateAccount: async function () {
       try {
@@ -118,5 +172,8 @@ new Vue({
     } catch (e) {
       LNbits.utils.notifyApiError(e)
     }
+    if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
+      this.applyGradient()
+    }
   }
 })

lnbits/static/js/base.js

@@ -425,6 +425,18 @@ window.LNbits = {
       converter.setFlavor('github')
       converter.setOption('simpleLineBreaks', true)
       return converter.makeHtml(text)
+    },
+    hexToRgb: function (hex) {
+      return Quasar.utils.colors.hexToRgb(hex)
+    },
+    hexDarken: function (hex, percent) {
+      return Quasar.utils.colors.lighten(hex, percent)
+    },
+    hexAlpha: function (hex, alpha) {
+      return Quasar.utils.colors.changeAlpha(hex, alpha)
+    },
+    getPaletteColor: function (color) {
+      return Quasar.utils.colors.getPaletteColor(color)
     }
   }
 }
@@ -435,6 +447,8 @@ window.windowMixin = {
     return {
       toggleSubs: true,
       reactionChoice: 'confettiBothSides',
+      gradientChoice:
+        this.$q.localStorage.getItem('lnbits.gradientBg') || false,
       isUserAuthorized: false,
       g: {
         offline: !navigator.onLine,
@@ -454,6 +468,25 @@ window.windowMixin = {
       document.body.setAttribute('data-theme', newValue)
       this.$q.localStorage.set('lnbits.theme', newValue)
     },
+    applyGradient: function () {
+      if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
+        darkBgColor = this.$q.localStorage.getItem('lnbits.darkBgColor')
+        primaryColor = this.$q.localStorage.getItem('lnbits.primaryColor')
+        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`
+        const style = document.createElement('style')
+        style.innerHTML =
+          `body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .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.$q.localStorage.getItem('lnbits.theme')}"].body--dark{background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important; }` +
+          `[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card--dark{background: ${String(darkBgColor)} !important;} }`
+        document.head.appendChild(style)
+      }
+    },
     copyText: function (text, message, position) {
       var notify = this.$q.notify
       Quasar.utils.copyToClipboard(text).then(function () {
@@ -517,6 +550,8 @@ window.windowMixin = {
     this.reactionChoice =
       this.$q.localStorage.getItem('lnbits.reactions') || 'confettiBothSides'
 
+    this.applyGradient()
+
     this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
 
     let locale = this.$q.localStorage.getItem('lnbits.lang')