Fixed themes, added bitcoin theme

This commit is contained in:
Ben Arc 2022-02-17 21:34:36 +00:00
parent c626e12fa3
commit e9065833c0
4 changed files with 31 additions and 5 deletions

View File

@ -30,7 +30,7 @@ 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
LNBITS_THEME_OPTIONS="mint, flamingo, classic, autumn, monochrome, salvador"
LNBITS_THEME_OPTIONS="classic, bitcoin, flamingo, mint, autumn, monochrome, salvador"
# Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC),
# LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet, FakeWallet

View File

@ -345,17 +345,25 @@ window.windowMixin = {
}
},
created: function () {
this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
this.g.allowedThemes = window.allowedThemes ?? ['classic']
if(this.$q.localStorage.getItem('lnbits.darkMode') == true || this.$q.localStorage.getItem('lnbits.darkMode') == false){
this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
}
else{
this.$q.dark.set(true)
}
this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
// failsafe if admin changes themes halfway
if (!this.$q.localStorage.getItem('lnbits.theme')){
this.changeColor(this.g.allowedThemes[0])
}
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])
}

View File

@ -1,4 +1,12 @@
$themes: (
'bitcoin': (
primary: #ff9853,
secondary: #ff7353,
dark: #2d293b,
info: #333646,
marginal-bg: #2d293b,
marginal-text: #fff
),
'classic': (
primary: #673ab7,
secondary: #9c27b0,

View File

@ -20,7 +20,7 @@
{% block head_scripts %}{% endblock %}
</head>
<body data-theme="classic">
<body data-theme="bitcoin">
<q-layout id="vue" view="hHh lpR lfr" v-cloak>
<q-header bordered class="bg-marginal-bg">
<q-toolbar>
@ -59,6 +59,16 @@
class="q-pl-md"
>
<div class="row no-wrap q-pa-md">
<q-btn
v-if="g.allowedThemes.includes('bitcoin')"
dense
flat
@click="changeColor('bitcoin')"
icon="format_color_fill"
color="orange"
size="md"
><q-tooltip>bitcoin</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('classic')"
dense