Merge pull request #237 from lnbits/colours

Color themes
This commit is contained in:
Arc 2021-06-30 13:52:38 +01:00 committed by GitHub
commit ca49253d90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 271 additions and 142 deletions

View File

@ -5,7 +5,7 @@ QUART_DEBUG=true
HOST=127.0.0.1
PORT=5000
LNBITS_SITE_TITLE=LNbits
LNBITS_ALLOWED_USERS=""
LNBITS_DEFAULT_WALLET_NAME="LNbits wallet"
LNBITS_DATA_FOLDER="./data"
@ -13,6 +13,10 @@ LNBITS_DISABLED_EXTENSIONS="amilk"
LNBITS_FORCE_HTTPS=true
LNBITS_SERVICE_FEE="0.0"
# Change theme
LNBITS_SITE_TITLE=LNbits
LNBITS_THEME_OPTIONS="classic,green,orange"
# Choose from LNPayWallet, OpenNodeWallet, LntxbotWallet, LndWallet (gRPC),
# LndRestWallet, CLightningWallet, LNbitsWallet, SparkWallet
LNBITS_BACKEND_WALLET_CLASS=VoidWallet

View File

@ -24,7 +24,7 @@
<div v-if="extension.isEnabled">
<q-btn
flat
color="deep-purple"
color="primary"
type="a"
:href="[extension.url, '?usr=', g.user.id].join('')"
>Open</q-btn
@ -41,7 +41,7 @@
<q-btn
v-else
flat
color="deep-purple"
color="primary"
type="a"
:href="['{{ url_for('core.extensions') }}', '?usr=', g.user.id, '&enable=', extension.code].join('')"
>

View File

@ -8,7 +8,7 @@
{% if lnurl %}
<q-btn
unelevated
color="deep-purple"
color="primary"
@click="processing"
type="a"
href="{{ url_for('core.lnurlwallet', lightning=lnurl) }}"
@ -25,7 +25,7 @@
></q-input>
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="walletName == ''"
type="submit"
>Add a new wallet</q-btn
@ -88,7 +88,12 @@
<div class="col-12 col-md-3 col-lg-3">
<div class="row q-col-gutter-lg justify-center">
<div class="col-6 col-sm-4 col-md-8 q-gutter-y-sm">
<q-btn flat color="purple" label="Runs on" class="full-width"></q-btn>
<q-btn
flat
color="secondary"
label="Runs on"
class="full-width"
></q-btn>
<div class="row">
<div class="col">
<a href="https://github.com/ElementsProject/lightning">

View File

@ -22,7 +22,7 @@
<div class="col">
<q-btn
unelevated
color="deep-purple"
color="primary"
class="full-width"
@click="showParseDialog"
>Paste Request</q-btn
@ -31,7 +31,7 @@
<div class="col">
<q-btn
unelevated
color="deep-purple"
color="primary"
class="full-width"
@click="showReceiveDialog"
>Create Invoice</q-btn
@ -40,7 +40,7 @@
<div class="col">
<q-btn
unelevated
color="purple"
color="secondary"
icon="photo_camera"
@click="showCamera"
>scan
@ -342,7 +342,7 @@
<div v-if="receive.status == 'pending'" class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="receive.data.memo == null || receive.data.amount == null || receive.data.amount <= 0"
type="submit"
>
@ -355,7 +355,7 @@
</div>
<q-spinner
v-if="receive.status == 'loading'"
color="deep-purple"
color="primary"
size="2.55em"
></q-spinner>
</q-form>
@ -395,7 +395,7 @@
</p>
{% endraw %}
<div v-if="canPay" class="row q-mt-lg">
<q-btn unelevated color="deep-purple" @click="payInvoice">Pay</q-btn>
<q-btn unelevated color="primary" @click="payInvoice">Pay</q-btn>
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div>
<div v-else class="row q-mt-lg">
@ -423,7 +423,7 @@
<code class="text-wrap"> {{ parse.lnurlauth.pubkey }} </code>
</p>
<div class="row q-mt-lg">
<q-btn unelevated color="deep-purple" type="submit">Login</q-btn>
<q-btn unelevated color="primary" type="submit">Login</q-btn>
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
>Cancel</q-btn
>
@ -485,9 +485,7 @@
</div>
</div>
<div class="row q-mt-lg">
<q-btn unelevated color="deep-purple" type="submit"
>Send satoshis</q-btn
>
<q-btn unelevated color="primary" type="submit">Send satoshis</q-btn>
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
>Cancel</q-btn
>
@ -512,7 +510,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="parse.data.request == ''"
type="submit"
>Read</q-btn

View File

@ -4,7 +4,7 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="amilkDialog.show = true"
<q-btn unelevated color="primary" @click="amilkDialog.show = true"
>New AMilk</q-btn
>
</q-card-section>
@ -109,7 +109,7 @@
></q-input>
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="amilkDialog.data.amount == null || amilkDialog.data.amount < 0 || amilkDialog.data.lnurl == null"
type="submit"
>Create amilk</q-btn

View File

@ -11,7 +11,7 @@
<div class="col-12 col-md-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>Add Bleskomat</q-btn
>
</q-card-section>
@ -150,14 +150,14 @@
<q-btn
v-if="formDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update Bleskomat</q-btn
>
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="
formDialog.data.wallet == null ||
formDialog.data.name == null ||

View File

@ -24,7 +24,7 @@
dense
flat
icon="check"
color="deep-purple"
color="primary"
type="submit"
@click="createInvoice"
:disabled="userAmount < captchaAmount || paymentReq"

View File

@ -4,7 +4,7 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New captcha</q-btn
>
</q-card-section>
@ -141,7 +141,7 @@
<q-item-section avatar>
<q-checkbox
v-model="formDialog.data.remembers"
color="deep-purple"
color="primary"
></q-checkbox>
</q-item-section>
<q-item-section>
@ -157,7 +157,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.amount == null || formDialog.data.amount < 0 || formDialog.data.memo == null"
type="submit"
>Create captcha</q-btn

View File

@ -5,10 +5,7 @@
<q-card>
<q-card-section>
{% raw %}
<q-btn
unelevated
color="deep-purple"
@click="formDialogCopilot.show = true"
<q-btn unelevated color="primary" @click="formDialogCopilot.show = true"
>New copilot instance
</q-btn>
</q-card-section>
@ -357,7 +354,7 @@
<q-btn
v-if="formDialogCopilot.data.id"
unelevated
color="deep-purple"
color="primary"
:disable="
formDialogCopilot.data.title == ''"
type="submit"
@ -366,7 +363,7 @@
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="
formDialogCopilot.data.title == ''"
type="submit"

View File

@ -4,10 +4,10 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="productDialog.show = true"
<q-btn unelevated color="primary" @click="productDialog.show = true"
>New Product</q-btn
>
<q-btn unelevated color="deep-purple" @click="indexerDialog.show = true"
<q-btn unelevated color="primary" @click="indexerDialog.show = true"
>New Indexer
<q-tooltip>
Frontend shop your stall will list its products in
@ -282,7 +282,7 @@
<q-btn
v-if="productDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update Product</q-btn
>
@ -290,7 +290,7 @@
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="productDialog.data.image == null
|| productDialog.data.product == null
|| productDialog.data.description == null
@ -374,7 +374,7 @@
<q-btn
v-if="indexerDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update Indexer</q-btn
>
@ -382,7 +382,7 @@
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="indexerDialog.data.shopname == null
|| indexerDialog.data.shippingzone1 == null
|| indexerDialog.data.indexeraddress == null

View File

@ -26,7 +26,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.name == '' || formDialog.data.email == '' || paymentReq"
type="submit"
>Submit</q-btn
@ -46,7 +46,7 @@
size="xl"
:href="ticketLink.data.link"
target="_blank"
color="deep-purple"
color="primary"
type="a"
>Link to your ticket!</q-btn
>

View File

@ -4,7 +4,7 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New Event</q-btn
>
</q-card-section>
@ -267,14 +267,14 @@
<q-btn
v-if="formDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update Event</q-btn
>
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.wallet == null || formDialog.data.name == null || formDialog.data.info == null || formDialog.data.closing_date == null || formDialog.data.event_start_date == null || formDialog.data.event_end_date == null || formDialog.data.amount_tickets == null || formDialog.data.price_per_ticket == null"
type="submit"
>Create Event</q-btn

View File

@ -10,7 +10,7 @@
<br />
<q-btn unelevated color="deep-purple" @click="showCamera" size="xl"
<q-btn unelevated color="primary" @click="showCamera" size="xl"
>Scan ticket</q-btn
>
</center>

View File

@ -6,7 +6,7 @@
<q-card-section>
<q-btn
unelevated
color="green-7"
color="primary"
class="q-ma-lg"
@click="openNewDialog()"
>Add Spotify Jukebox</q-btn
@ -108,8 +108,8 @@
<q-card class="q-pa-md q-pt-lg q-mt-md" style="width: 100%">
<q-stepper
v-model="step"
active-color="green-7"
inactive-color="green-10"
active-color="primary"
inactive-color="secondary"
vertical
animated
>
@ -149,15 +149,15 @@
<div class="col-4">
<q-btn
v-if="jukeboxDialog.data.title != null && jukeboxDialog.data.price != null && jukeboxDialog.data.wallet != null"
color="green-7"
color="primary"
@click="step = 2"
>Continue</q-btn
>
<q-btn v-else color="green-7" disable>Continue</q-btn>
<q-btn v-else color="primary" disable>Continue</q-btn>
</div>
<div class="col-8">
<q-btn
color="green-7"
color="primary"
class="float-right"
@click="closeFormDialog"
>Cancel</q-btn
@ -208,17 +208,17 @@
<div class="col-4">
<q-btn
v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
color="green-7"
color="primary"
@click="submitSpotifyKeys"
>Submit keys</q-btn
>
<q-btn v-else color="green-7" disable color="green-7"
<q-btn v-else color="primary" disable color="primary"
>Submit keys</q-btn
>
</div>
<div class="col-8">
<q-btn
color="green-7"
color="primary"
class="float-right"
@click="closeFormDialog"
>Cancel</q-btn
@ -237,7 +237,7 @@
dense
outline
unelevated
color="green-7"
color="primary"
size="xs"
@click="copyText(locationcb + jukeboxDialog.data.sp_id, 'Link copied to clipboard!')"
>{% raw %}{{ locationcb }}{{ jukeboxDialog.data.sp_id }}{% endraw
@ -256,17 +256,17 @@
<div class="col-4">
<q-btn
v-if="jukeboxDialog.data.sp_secret != null && jukeboxDialog.data.sp_user != null && tokenFetched"
color="green-7"
color="primary"
@click="authAccess"
>Authorise access</q-btn
>
<q-btn v-else color="green-7" disable color="green-7"
<q-btn v-else color="primary" disable color="primary"
>Authorise access</q-btn
>
</div>
<div class="col-8">
<q-btn
color="green-7"
color="primary"
class="float-right"
@click="closeFormDialog"
>Cancel</q-btn
@ -281,7 +281,7 @@
:name="4"
title="Select playlists"
icon="queue_music"
active-color="green-8"
active-color="primary"
:done="step > 4"
>
<q-select
@ -307,15 +307,15 @@
<div class="col-5">
<q-btn
v-if="jukeboxDialog.data.sp_device != null && jukeboxDialog.data.sp_playlists != null"
color="green-7"
color="primary"
@click="createJukebox"
>Create Jukebox</q-btn
>
<q-btn v-else color="green-7" disable>Create Jukebox</q-btn>
<q-btn v-else color="primary" disable>Create Jukebox</q-btn>
</div>
<div class="col-7">
<q-btn
color="green-7"
color="primary"
class="float-right"
@click="closeFormDialog"
>Cancel</q-btn

View File

@ -26,7 +26,7 @@
</div>
<div class="col">
{% raw %}
<q-btn unelevated color="deep-purple" type="submit">
<q-btn unelevated color="primary" type="submit">
{{ nextCurrentTrack && nextCurrentTrack ===
livestream.current_track ? 'Stop' : 'Set' }} current track
</q-btn>
@ -46,7 +46,7 @@
></q-input>
</div>
<div class="col">
<q-btn unelevated color="deep-purple" type="submit"
<q-btn unelevated color="primary" type="submit"
>Set percent rate</q-btn
>
</div>
@ -61,7 +61,7 @@
<h5 class="text-subtitle1 q-my-none">Tracks</h5>
</div>
<div class="col q-ml-lg">
<q-btn unelevated color="deep-purple" @click="openAddTrackDialog"
<q-btn unelevated color="primary" @click="openAddTrackDialog"
>Add new track</q-btn
>
</div>
@ -296,7 +296,7 @@
<div class="col q-ml-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="disabledAddTrackButton()"
type="submit"
>

View File

@ -33,7 +33,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.name == '' || formDialog.data.text == ''"
type="submit"
>Submit</q-btn

View File

@ -4,7 +4,7 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New Form</q-btn
>
</q-card-section>
@ -217,7 +217,7 @@
<q-btn
v-if="formDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update Form</q-btn
>
@ -225,7 +225,7 @@
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.costpword == null || formDialog.data.costpword < 0 || formDialog.data.name == null"
type="submit"
>Create Form</q-btn

View File

@ -4,7 +4,7 @@
<div class="col-12 col-md-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New pay link</q-btn
>
</q-card-section>
@ -227,14 +227,14 @@
<q-btn
v-if="formDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update pay link</q-btn
>
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="
formDialog.data.wallet == null ||
formDialog.data.description == null ||

View File

@ -9,7 +9,7 @@
<h5 class="text-subtitle1 q-my-none">Items</h5>
</div>
<div class="col q-ml-lg">
<q-btn unelevated color="deep-purple" @click="openNewDialog()"
<q-btn unelevated color="primary" @click="openNewDialog()"
>Add new item</q-btn
>
</div>
@ -111,7 +111,7 @@
<q-btn
type="a"
outline
color="purple"
color="secondary"
:href="'print?items=' + printItems.map(({id}) => id).join(',')"
>Print QR Codes</q-btn
>
@ -123,7 +123,7 @@
<q-tabs
v-model="confirmationMethod"
no-caps
class="bg-purple text-white shadow-2"
class="bg-dark text-white shadow-2"
>
<q-tab name="wordlist" label="Wordlist"></q-tab>
<q-tab name="totp" label="TOTP (Google Authenticator)"></q-tab>
@ -151,7 +151,7 @@
>
<q-btn
unelevated
color="deep-purple"
color="primary"
type="submit"
:disabled="!wordlistTainted"
>
@ -180,7 +180,7 @@
>
<q-btn
unelevated
color="deep-purple"
color="primary"
:disabled="offlineshop.method === 'totp'"
@click="setMethod"
>
@ -199,7 +199,7 @@
<q-btn
unelevated
color="deep-purple"
color="primary"
:disabled="offlineshop.method === 'none'"
@click="setMethod"
>
@ -308,7 +308,7 @@
<div class="col q-ml-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="disabledAddItemButton()"
type="submit"
>

View File

@ -24,7 +24,7 @@
dense
flat
icon="check"
color="deep-purple"
color="primary"
type="submit"
@click="createInvoice"
:disabled="userAmount < paywallAmount || paymentReq"

View File

@ -4,7 +4,7 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New paywall</q-btn
>
</q-card-section>
@ -141,7 +141,7 @@
<q-item-section avatar>
<q-checkbox
v-model="formDialog.data.remembers"
color="deep-purple"
color="primary"
></q-checkbox>
</q-item-section>
<q-item-section>
@ -157,7 +157,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.amount == null || formDialog.data.amount < 0 || formDialog.data.url == null || formDialog.data.memo == null"
type="submit"
>Create paywall</q-btn

View File

@ -5,10 +5,7 @@
<q-card>
<q-card-section>
{% raw %}
<q-btn
unelevated
color="deep-purple"
@click="formDialogCharge.show = true"
<q-btn unelevated color="primary" @click="formDialogCharge.show = true"
>New charge
</q-btn>
</q-card-section>
@ -265,7 +262,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="
formDialogCharge.data.time == null ||
formDialogCharge.data.amount == null"

View File

@ -60,7 +60,7 @@
<q-row class="row justify-evenly q-pa-lg">
<q-col>
<q-btn unelevated outline color="purple" @click="clearTargets">
<q-btn unelevated outline color="secondary" @click="clearTargets">
Clear
</q-btn>
</q-col>
@ -68,7 +68,7 @@
<q-col>
<q-btn
unelevated
color="deep-purple"
color="primary"
type="submit"
:disabled="!isDirty"
>

View File

@ -53,7 +53,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.subdomain == '' || formDialog.data.ip == '' || formDialog.data.duration == ''"
type="submit"
>Submit</q-btn

View File

@ -5,7 +5,7 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="domainDialog.show = true"
<q-btn unelevated color="primary" @click="domainDialog.show = true"
>New Domain</q-btn
>
</q-card-section>
@ -233,14 +233,14 @@
<q-btn
v-if="domainDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update Form</q-btn
>
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="domainDialog.data.cost == null || domainDialog.data.cost < 0 || domainDialog.data.domain == null"
type="submit"
>Create Domain</q-btn

View File

@ -4,7 +4,7 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New TPoS</q-btn
>
</q-card-section>
@ -119,7 +119,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="formDialog.data.currency == null || formDialog.data.name == null"
type="submit"
>Create TPoS</q-btn

View File

@ -4,10 +4,10 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="deep-purple" @click="userDialog.show = true"
<q-btn unelevated color="primary" @click="userDialog.show = true"
>New User</q-btn
>
<q-btn unelevated color="deep-purple" @click="walletDialog.show = true"
<q-btn unelevated color="primary" @click="walletDialog.show = true"
>New Wallet
</q-btn>
</q-card-section>
@ -172,7 +172,7 @@
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="userDialog.data.walname == null"
type="submit"
>Create User</q-btn
@ -202,7 +202,7 @@
></q-input>
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="walletDialog.data.walname == null"
type="submit"
>Create Wallet</q-btn

View File

@ -5,10 +5,10 @@
<q-card>
<q-card-section>
{% raw %}
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New wallet
</q-btn>
<q-btn unelevated color="deep-purple" icon="edit">
<q-btn unelevated color="primary" icon="edit">
<div class="cursor-pointer">
<q-tooltip> Point to another Mempool </q-tooltip>
{{ this.mempool.endpoint }}
@ -143,7 +143,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="
formDialog.data.masterpub == null ||
formDialog.data.title == null"

View File

@ -6,13 +6,10 @@
<div class="col-12 col-md-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn
unelevated
color="deep-purple"
@click="simpleformDialog.show = true"
<q-btn unelevated color="primary" @click="simpleformDialog.show = true"
>Quick vouchers</q-btn
>
<q-btn unelevated color="deep-purple" @click="formDialog.show = true"
<q-btn unelevated color="primary" @click="formDialog.show = true"
>Advanced withdraw link(s)</q-btn
>
</q-card-section>
@ -197,7 +194,7 @@
<q-item-section avatar>
<q-checkbox
v-model="formDialog.data.is_unique"
color="deep-purple"
color="primary"
></q-checkbox>
</q-item-section>
<q-item-section>
@ -216,14 +213,14 @@
<q-btn
v-if="formDialog.data.id"
unelevated
color="deep-purple"
color="primary"
type="submit"
>Update withdraw link</q-btn
>
<q-btn
v-else
unelevated
color="deep-purple"
color="primary"
:disable="
formDialog.data.wallet == null ||
formDialog.data.title == null ||
@ -281,7 +278,7 @@
<div class="row q-mt-lg">
<q-btn
unelevated
color="deep-purple"
color="primary"
:disable="
simpleformDialog.data.wallet == null ||
@ -324,7 +321,7 @@
qrCodeDialog.data.uses }}
<q-linear-progress
:value="qrCodeDialog.data.used / qrCodeDialog.data.uses"
color="deep-purple"
color="primary"
class="q-mt-sm"
></q-linear-progress>
</p>

View File

@ -29,7 +29,9 @@ LNBITS_ALLOWED_USERS: List[str] = env.list(
LNBITS_DISABLED_EXTENSIONS: List[str] = env.list(
"LNBITS_DISABLED_EXTENSIONS", default=[], subcast=str
)
LNBITS_SITE_TITLE = env.str("LNBITS_SITE_TITLE", default="LNbits")
LNBITS_THEME_OPTIONS = env.str("LNBITS_THEME_OPTIONS", default="classic,green,orange")
WALLET = wallet_class()
DEFAULT_WALLET_NAME = env.str("LNBITS_DEFAULT_WALLET_NAME", default="LNbits wallet")

View File

@ -311,7 +311,14 @@ window.windowMixin = {
}
}
},
methods: {
changeColor: function (newValue) {
document.body.setAttribute('data-theme', newValue)
console.log(document.body.getAttribute('data-theme'))
console.log(newValue)
this.$q.localStorage.set('lnbits.theme', newValue)
},
toggleDarkMode: function () {
this.$q.dark.toggle()
this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
@ -328,6 +335,12 @@ window.windowMixin = {
},
created: function () {
this.$q.dark.set(this.$q.localStorage.getItem('lnbits.darkMode'))
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))
}

View File

@ -35,7 +35,7 @@ Vue.component('lnbits-wallet-list', {
<q-item-section side>
<q-avatar size="md"
:color="(activeWallet && activeWallet.id === wallet.id)
? (($q.dark.isActive) ? 'deep-purple-5' : 'deep-purple')
? (($q.dark.isActive) ? 'primary' : 'primary')
: 'grey-5'">
<q-icon name="flash_on" :size="($q.dark.isActive) ? '21px' : '20px'"
:color="($q.dark.isActive) ? 'blue-grey-10' : 'grey-3'"></q-icon>
@ -118,7 +118,7 @@ Vue.component('lnbits-extension-list', {
<q-item-section side>
<q-avatar size="md"
:color="(extension.isActive)
? (($q.dark.isActive) ? 'deep-purple-5' : 'deep-purple')
? (($q.dark.isActive) ? 'primary' : 'primary')
: 'grey-5'">
<q-icon :name="extension.icon" :size="($q.dark.isActive) ? '21px' : '20px'"
:color="($q.dark.isActive) ? 'blue-grey-10' : 'grey-3'"></q-icon>
@ -219,7 +219,7 @@ Vue.component('lnbits-payment-details', {
</div>
<div class="row" v-for="entry in extras">
<div class="col-3">
<q-badge v-if="hasTag" color="purple" text-color="white">
<q-badge v-if="hasTag" color="secondary" text-color="white">
extra
</q-badge>
<b>{{ entry.key }}</b>:

View File

@ -1,34 +1,86 @@
$dark-background: #1f2234;
$dark-card-background: #333646;
$themes: (
'classic': (
primary: #673ab7,
secondary: #9c27b0,
dark: #1f2234,
info: #333646,
marginal-bg: #1f2234,
marginal-text: #fff
),
'mint': (
primary: #3ab77d,
secondary: #27b065,
dark: #1f342b,
info: #334642,
marginal-bg: #1f342b,
marginal-text: #fff
),
'autumn': (
primary: #b7763a,
secondary: #b07927,
dark: #34291f,
info: #463f33,
marginal-bg: #342a1f,
marginal-text: rgb(255, 255, 255)
),
'flamingo': (
primary: #d11d53,
secondary: #db3e6d,
dark: #e75480,
info: #ec7599,
marginal-bg: #e75480,
marginal-text: rgb(255, 255, 255)
),
'monochrome': (
primary: #494949,
secondary: #6b6b6b,
dark: #000,
info: rgb(39, 39, 39),
marginal-bg: #000,
marginal-text: rgb(255, 255, 255)
)
);
[data-theme='quasar'] .q-drawer--dark {
background: #121212 !important;
}
@each $theme, $colors in $themes {
@each $name, $color in $colors {
@if $name == 'dark' {
[data-theme='#{$theme}'] .q-drawer--dark,
body[data-theme='#{$theme}'].body--dark,
[data-theme='#{$theme}'] .q-menu--dark {
background: $color !important;
}
}
@if $name == 'info' {
[data-theme='#{$theme}'] .q-card--dark,
[data-theme='#{$theme}'] .q-stepper--dark {
background: $color !important;
}
}
}
[data-theme='#{$theme}'] {
@each $name, $color in $colors {
.bg-#{$name} {
background: $color !important;
}
.text-#{$name} {
color: $color !important;
}
}
}
}
[v-cloak] {
display: none;
}
.bg-lnbits-dark {
background-color: $dark-background;
}
body.body--dark,
body.body--dark .q-drawer--dark,
body.body--dark .q-menu--dark {
background: $dark-background;
}
body.body--dark .q-card--dark {
background: $dark-card-background;
}
body.body--dark .q-table--dark {
background: transparent;
}
body.body--light,
body.body--light .q-drawer {
background: whitesmoke;
}
body.body--dark .q-field--error {
.text-negative,
.q-field__messages {

View File

@ -7,6 +7,7 @@
{% endfor %}
<!---->
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
{% block styles %}{% endblock %}
<title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
<meta charset="utf-8" />
@ -19,9 +20,9 @@
{% block head_scripts %}{% endblock %}
</head>
<body>
<q-layout id="vue" view="hHh lpR lfr" v-cloak>
<q-header bordered class="bg-lnbits-dark">
<body data-theme="classic">
<q-layout :color="dark" id="vue" view="hHh lpR lfr" v-cloak>
<q-header bordered class="bg-marginal-bg">
<q-toolbar>
{% block drawer_toggle %}
<q-btn
@ -46,13 +47,76 @@
>
</q-badge>
{% endblock %}
<q-btn-dropdown
dense
flat
round
size="sm"
icon="dashboard_customize"
class="q-pl-md"
>
<div class="row no-wrap q-pa-md">
<q-btn
dense
flat
@click="changeColor('classic')"
icon="format_color_fill"
color="deep-purple"
size="md"
><q-tooltip>classic</q-tooltip> </q-btn
><q-btn
dense
flat
@click="changeColor('mint')"
icon="format_color_fill"
color="green"
size="md"
><q-tooltip>mint</q-tooltip> </q-btn
><q-btn
dense
flat
@click="changeColor('autumn')"
icon="format_color_fill"
color="brown"
size="md"
><q-tooltip>autumn</q-tooltip>
</q-btn>
<q-btn
dense
flat
@click="changeColor('flamingo')"
icon="format_color_fill"
color="pink-3"
size="md"
><q-tooltip>flamingo</q-tooltip>
</q-btn>
<q-btn
dense
flat
@click="changeColor('monochrome')"
icon="format_color_fill"
color="grey"
size="md"
><q-tooltip>monochrome</q-tooltip>
</q-btn>
<q-btn
dense
flat
@click="changeColor('quasar')"
icon="format_color_fill"
color="blue"
size="md"
><q-tooltip>quasar</q-tooltip>
</q-btn>
</div>
</q-btn-dropdown>
<q-btn
dense
flat
round
@click="toggleDarkMode"
:icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
class="q-ml-lg"
size="sm"
>
<q-tooltip>Toggle Dark Mode</q-tooltip>
@ -93,7 +157,7 @@
<q-btn
flat
dense
:color="($q.dark.isActive) ? 'white' : 'deep-purple'"
:color="($q.dark.isActive) ? 'white' : 'primary'"
icon="code"
type="a"
href="https://github.com/lnbits/lnbits"