From 4493e93890cf83587a6095fa09de0d7a3b782e53 Mon Sep 17 00:00:00 2001 From: Tiago vasconcelos Date: Thu, 1 Jul 2021 11:54:45 +0100 Subject: [PATCH 1/2] small fix for theme picking/seting --- lnbits/settings.py | 2 +- lnbits/static/js/base.js | 21 ++++++++++++++------- lnbits/static/scss/base.scss | 7 +++++++ lnbits/templates/base.html | 5 +++-- 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/lnbits/settings.py b/lnbits/settings.py index 8ce0ff3b..58c5aa15 100644 --- a/lnbits/settings.py +++ b/lnbits/settings.py @@ -31,7 +31,7 @@ LNBITS_DISABLED_EXTENSIONS: List[str] = env.list( ) LNBITS_SITE_TITLE = env.str("LNBITS_SITE_TITLE", default="LNbits") -LNBITS_THEME_OPTIONS = env.str("LNBITS_THEME_OPTIONS", default="classic,green,orange") +LNBITS_THEME_OPTIONS: List[str] = env.list("LNBITS_THEME_OPTIONS", default="classic,green,orange", subcast=str) WALLET = wallet_class() DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet") diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js index 40044cb7..45b2c891 100644 --- a/lnbits/static/js/base.js +++ b/lnbits/static/js/base.js @@ -316,8 +316,8 @@ window.windowMixin = { methods: { changeColor: function (newValue) { document.body.setAttribute('data-theme', newValue) - console.log(document.body.getAttribute('data-theme')) - console.log(newValue) + //console.log(document.body.getAttribute('data-theme')) + //console.log(newValue) this.$q.localStorage.set('lnbits.theme', newValue) }, toggleDarkMode: function () { @@ -337,12 +337,19 @@ window.windowMixin = { created: function () { this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode')) this.g.allowedThemes = window.allowedThemes - if (this.$q.localStorage.getItem('lnbits.theme')) { - document.body.setAttribute( - 'data-theme', - this.$q.localStorage.getItem('lnbits.theme') - ) + + let theme = this.$q.localStorage.getItem('lnbits.theme') + + // failsafe if admin changes themes halfway + if (theme && !this.g.allowedThemes.includes(theme)) { + console.log('allowedThemes changed by Admin', this.g.allowedThemes[0]) + this.changeColor(this.g.allowedThemes[0] || 'classic') } + + if (theme) { + document.body.setAttribute('data-theme', theme) + } + if (window.user) { this.g.user = Object.freeze(window.LNbits.map.user(window.user)) } diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss index 3766d164..5498ddfb 100644 --- a/lnbits/static/scss/base.scss +++ b/lnbits/static/scss/base.scss @@ -53,6 +53,13 @@ $themes: ( [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%); + } + */ } @if $name == 'info' { [data-theme='#{$theme}'] .q-card--dark, diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html index 0e4fd787..1f0fb845 100644 --- a/lnbits/templates/base.html +++ b/lnbits/templates/base.html @@ -48,7 +48,7 @@ {% endblock %}
const themes = {{ LNBITS_THEME_OPTIONS | tojson }} if(themes && themes.length) { - window.allowedThemes = themes.trim() + window.allowedThemes = themes.map(str => str.trim()) } {% block scripts %}{% endblock %} From 277460edb7ae9c0356a3f24590f6b81a68d8979e Mon Sep 17 00:00:00 2001 From: Tiago vasconcelos Date: Thu, 1 Jul 2021 12:34:50 +0100 Subject: [PATCH 2/2] final push for themes --- .env.example | 4 ++-- lnbits/settings.py | 2 +- lnbits/static/js/base.js | 20 +++++++++++++------- lnbits/templates/base.html | 8 ++++---- 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/.env.example b/.env.example index a9faad0b..65e81428 100644 --- a/.env.example +++ b/.env.example @@ -15,8 +15,8 @@ LNBITS_SERVICE_FEE="0.0" # Change theme LNBITS_SITE_TITLE=LNbits -# Choose from mint, flamingo, quasar, autumn, monochrome -LNBITS_THEME_OPTIONS="mint, flamingo, quasar, autumn, monochrome, salvador" +# Choose from mint, flamingo, salvador, autumn, monochrome, classic +LNBITS_THEME_OPTIONS="mint, flamingo, classic, autumn, monochrome, salvador" # Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC), # LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet diff --git a/lnbits/settings.py b/lnbits/settings.py index 58c5aa15..d7428f6c 100644 --- a/lnbits/settings.py +++ b/lnbits/settings.py @@ -31,7 +31,7 @@ LNBITS_DISABLED_EXTENSIONS: List[str] = env.list( ) LNBITS_SITE_TITLE = env.str("LNBITS_SITE_TITLE", default="LNbits") -LNBITS_THEME_OPTIONS: List[str] = env.list("LNBITS_THEME_OPTIONS", default="classic,green,orange", subcast=str) +LNBITS_THEME_OPTIONS: List[str] = env.list("LNBITS_THEME_OPTIONS", default="classic, flamingo, mint, salvador, monochrome, autumn", subcast=str) WALLET = wallet_class() DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet") diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js index 8a4bbd34..44d02036 100644 --- a/lnbits/static/js/base.js +++ b/lnbits/static/js/base.js @@ -334,18 +334,24 @@ window.windowMixin = { }, created: function () { this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode')) - this.g.allowedThemes = window.allowedThemes - - let theme = this.$q.localStorage.getItem('lnbits.theme') + this.g.allowedThemes = window.allowedThemes ?? ['classic'] // failsafe if admin changes themes halfway - if (theme && !this.g.allowedThemes.includes(theme)) { + if ( + this.$q.localStorage.getItem('lnbits.theme') && + !this.g.allowedThemes.includes( + this.$q.localStorage.getItem('lnbits.theme') + ) + ) { console.log('allowedThemes changed by Admin', this.g.allowedThemes[0]) - this.changeColor(this.g.allowedThemes[0] || 'classic') + this.changeColor(this.g.allowedThemes[0]) } - if (theme) { - document.body.setAttribute('data-theme', theme) + if (this.$q.localStorage.getItem('lnbits.theme')) { + document.body.setAttribute( + 'data-theme', + this.$q.localStorage.getItem('lnbits.theme') + ) } if (window.user) { diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html index 3aa7767e..9a54a71d 100644 --- a/lnbits/templates/base.html +++ b/lnbits/templates/base.html @@ -39,7 +39,7 @@ LNbits {% endif %} {% endblock %} {% block beta %} - + USE WITH CAUTION - LNbits wallet is still in autumn monochrome elSalvador