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 8ce0ff3b..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 = env.str("LNBITS_THEME_OPTIONS", default="classic,green,orange") +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 eb0fdbd4..44d02036 100644 --- a/lnbits/static/js/base.js +++ b/lnbits/static/js/base.js @@ -334,13 +334,26 @@ window.windowMixin = { }, created: function () { this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode')) - this.g.allowedThemes = window.allowedThemes + this.g.allowedThemes = window.allowedThemes ?? ['classic'] + + // failsafe if admin changes themes halfway + 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]) + } + if (this.$q.localStorage.getItem('lnbits.theme')) { document.body.setAttribute( 'data-theme', this.$q.localStorage.getItem('lnbits.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 4fc9a251..32718f79 100644 --- a/lnbits/static/scss/base.scss +++ b/lnbits/static/scss/base.scss @@ -49,6 +49,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 00131901..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 {% endblock %}
autumn monochrome elSalvador const themes = {{ LNBITS_THEME_OPTIONS | tojson }} if(themes && themes.length) { - window.allowedThemes = themes.trim() + window.allowedThemes = themes.map(str => str.trim()) } {% block scripts %}{% endblock %}