small fix for theme picking/seting

This commit is contained in:
Tiago vasconcelos 2021-07-01 11:54:45 +01:00
parent 87d12634f7
commit 4493e93890
4 changed files with 25 additions and 10 deletions

View File

@ -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")

View File

@ -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))
}

View File

@ -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,

View File

@ -48,7 +48,7 @@
</q-badge>
{% endblock %}
<q-btn-dropdown
v-if="g.allowedThemes"
v-if="g.allowedThemes && g.allowedThemes.length > 1"
dense
flat
round
@ -58,6 +58,7 @@
>
<div class="row no-wrap q-pa-md">
<q-btn
v-if="g.allowedThemes.includes('classic')"
dense
flat
@click="changeColor('classic')"
@ -188,7 +189,7 @@
<script type="text/javascript">
const themes = {{ LNBITS_THEME_OPTIONS | tojson }}
if(themes && themes.length) {
window.allowedThemes = themes.trim()
window.allowedThemes = themes.map(str => str.trim())
}
</script>
{% block scripts %}{% endblock %}