diff --git a/.env.example b/.env.example
index cc70644c..d44f9555 100644
--- a/.env.example
+++ b/.env.example
@@ -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
diff --git a/lnbits/core/templates/core/extensions.html b/lnbits/core/templates/core/extensions.html
index ced46ee1..daeb660f 100644
--- a/lnbits/core/templates/core/extensions.html
+++ b/lnbits/core/templates/core/extensions.html
@@ -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('')"
         >
diff --git a/lnbits/core/templates/core/index.html b/lnbits/core/templates/core/index.html
index 7ca61a3a..14842e92 100644
--- a/lnbits/core/templates/core/index.html
+++ b/lnbits/core/templates/core/index.html
@@ -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">
diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index d127b6f9..2856f253 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -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
diff --git a/lnbits/extensions/amilk/templates/amilk/index.html b/lnbits/extensions/amilk/templates/amilk/index.html
index 357dd885..bb332e27 100644
--- a/lnbits/extensions/amilk/templates/amilk/index.html
+++ b/lnbits/extensions/amilk/templates/amilk/index.html
@@ -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
diff --git a/lnbits/extensions/bleskomat/templates/bleskomat/index.html b/lnbits/extensions/bleskomat/templates/bleskomat/index.html
index d00937c1..109626e3 100644
--- a/lnbits/extensions/bleskomat/templates/bleskomat/index.html
+++ b/lnbits/extensions/bleskomat/templates/bleskomat/index.html
@@ -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 ||
diff --git a/lnbits/extensions/captcha/templates/captcha/display.html b/lnbits/extensions/captcha/templates/captcha/display.html
index 80e59e63..a96cae05 100644
--- a/lnbits/extensions/captcha/templates/captcha/display.html
+++ b/lnbits/extensions/captcha/templates/captcha/display.html
@@ -24,7 +24,7 @@
                   dense
                   flat
                   icon="check"
-                  color="deep-purple"
+                  color="primary"
                   type="submit"
                   @click="createInvoice"
                   :disabled="userAmount < captchaAmount || paymentReq"
diff --git a/lnbits/extensions/captcha/templates/captcha/index.html b/lnbits/extensions/captcha/templates/captcha/index.html
index 2250bced..d93a24f8 100644
--- a/lnbits/extensions/captcha/templates/captcha/index.html
+++ b/lnbits/extensions/captcha/templates/captcha/index.html
@@ -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
diff --git a/lnbits/extensions/copilot/templates/copilot/index.html b/lnbits/extensions/copilot/templates/copilot/index.html
index 3cf71e75..0e652e71 100644
--- a/lnbits/extensions/copilot/templates/copilot/index.html
+++ b/lnbits/extensions/copilot/templates/copilot/index.html
@@ -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"
diff --git a/lnbits/extensions/diagonalley/templates/diagonalley/index.html b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
index cdf9da53..c041239f 100644
--- a/lnbits/extensions/diagonalley/templates/diagonalley/index.html
+++ b/lnbits/extensions/diagonalley/templates/diagonalley/index.html
@@ -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
diff --git a/lnbits/extensions/events/templates/events/display.html b/lnbits/extensions/events/templates/events/display.html
index be10b08c..4c1f557f 100644
--- a/lnbits/extensions/events/templates/events/display.html
+++ b/lnbits/extensions/events/templates/events/display.html
@@ -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
         >
diff --git a/lnbits/extensions/events/templates/events/index.html b/lnbits/extensions/events/templates/events/index.html
index 384cf630..5d3cc262 100644
--- a/lnbits/extensions/events/templates/events/index.html
+++ b/lnbits/extensions/events/templates/events/index.html
@@ -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
diff --git a/lnbits/extensions/events/templates/events/register.html b/lnbits/extensions/events/templates/events/register.html
index b1a6a6c1..4dff9afb 100644
--- a/lnbits/extensions/events/templates/events/register.html
+++ b/lnbits/extensions/events/templates/events/register.html
@@ -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>
diff --git a/lnbits/extensions/jukebox/templates/jukebox/index.html b/lnbits/extensions/jukebox/templates/jukebox/index.html
index 0bdcc3f0..ee572111 100644
--- a/lnbits/extensions/jukebox/templates/jukebox/index.html
+++ b/lnbits/extensions/jukebox/templates/jukebox/index.html
@@ -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
diff --git a/lnbits/extensions/livestream/templates/livestream/index.html b/lnbits/extensions/livestream/templates/livestream/index.html
index e6585ac0..c6fc5b4a 100644
--- a/lnbits/extensions/livestream/templates/livestream/index.html
+++ b/lnbits/extensions/livestream/templates/livestream/index.html
@@ -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"
               >
diff --git a/lnbits/extensions/lnticket/templates/lnticket/display.html b/lnbits/extensions/lnticket/templates/lnticket/display.html
index b432ce9e..d570ad79 100644
--- a/lnbits/extensions/lnticket/templates/lnticket/display.html
+++ b/lnbits/extensions/lnticket/templates/lnticket/display.html
@@ -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
diff --git a/lnbits/extensions/lnticket/templates/lnticket/index.html b/lnbits/extensions/lnticket/templates/lnticket/index.html
index d2ab7801..1c909f09 100644
--- a/lnbits/extensions/lnticket/templates/lnticket/index.html
+++ b/lnbits/extensions/lnticket/templates/lnticket/index.html
@@ -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
diff --git a/lnbits/extensions/lnurlp/templates/lnurlp/index.html b/lnbits/extensions/lnurlp/templates/lnurlp/index.html
index c7d60667..b168675e 100644
--- a/lnbits/extensions/lnurlp/templates/lnurlp/index.html
+++ b/lnbits/extensions/lnurlp/templates/lnurlp/index.html
@@ -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 ||
diff --git a/lnbits/extensions/offlineshop/templates/offlineshop/index.html b/lnbits/extensions/offlineshop/templates/offlineshop/index.html
index 1a388e92..2ded94c6 100644
--- a/lnbits/extensions/offlineshop/templates/offlineshop/index.html
+++ b/lnbits/extensions/offlineshop/templates/offlineshop/index.html
@@ -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"
               >
diff --git a/lnbits/extensions/paywall/templates/paywall/display.html b/lnbits/extensions/paywall/templates/paywall/display.html
index 391f4e84..7bc7d9b8 100644
--- a/lnbits/extensions/paywall/templates/paywall/display.html
+++ b/lnbits/extensions/paywall/templates/paywall/display.html
@@ -24,7 +24,7 @@
                   dense
                   flat
                   icon="check"
-                  color="deep-purple"
+                  color="primary"
                   type="submit"
                   @click="createInvoice"
                   :disabled="userAmount < paywallAmount || paymentReq"
diff --git a/lnbits/extensions/paywall/templates/paywall/index.html b/lnbits/extensions/paywall/templates/paywall/index.html
index fdda6cf5..2fe7b4ea 100644
--- a/lnbits/extensions/paywall/templates/paywall/index.html
+++ b/lnbits/extensions/paywall/templates/paywall/index.html
@@ -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
diff --git a/lnbits/extensions/satspay/templates/satspay/index.html b/lnbits/extensions/satspay/templates/satspay/index.html
index 3a02b0fc..711c69d8 100644
--- a/lnbits/extensions/satspay/templates/satspay/index.html
+++ b/lnbits/extensions/satspay/templates/satspay/index.html
@@ -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"
diff --git a/lnbits/extensions/splitpayments/templates/splitpayments/index.html b/lnbits/extensions/splitpayments/templates/splitpayments/index.html
index d592bcd1..a4559635 100644
--- a/lnbits/extensions/splitpayments/templates/splitpayments/index.html
+++ b/lnbits/extensions/splitpayments/templates/splitpayments/index.html
@@ -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"
               >
diff --git a/lnbits/extensions/subdomains/templates/subdomains/display.html b/lnbits/extensions/subdomains/templates/subdomains/display.html
index e46228cd..e52ac73c 100644
--- a/lnbits/extensions/subdomains/templates/subdomains/display.html
+++ b/lnbits/extensions/subdomains/templates/subdomains/display.html
@@ -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
diff --git a/lnbits/extensions/subdomains/templates/subdomains/index.html b/lnbits/extensions/subdomains/templates/subdomains/index.html
index 74fd4ade..8b2aa841 100644
--- a/lnbits/extensions/subdomains/templates/subdomains/index.html
+++ b/lnbits/extensions/subdomains/templates/subdomains/index.html
@@ -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
diff --git a/lnbits/extensions/tpos/templates/tpos/index.html b/lnbits/extensions/tpos/templates/tpos/index.html
index 43edb618..f529d955 100644
--- a/lnbits/extensions/tpos/templates/tpos/index.html
+++ b/lnbits/extensions/tpos/templates/tpos/index.html
@@ -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
diff --git a/lnbits/extensions/usermanager/templates/usermanager/index.html b/lnbits/extensions/usermanager/templates/usermanager/index.html
index 20c1577c..358da638 100644
--- a/lnbits/extensions/usermanager/templates/usermanager/index.html
+++ b/lnbits/extensions/usermanager/templates/usermanager/index.html
@@ -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
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 904fbff2..011fe2aa 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -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"
diff --git a/lnbits/extensions/withdraw/templates/withdraw/index.html b/lnbits/extensions/withdraw/templates/withdraw/index.html
index 7442ca96..ebf18b07 100644
--- a/lnbits/extensions/withdraw/templates/withdraw/index.html
+++ b/lnbits/extensions/withdraw/templates/withdraw/index.html
@@ -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>
diff --git a/lnbits/settings.py b/lnbits/settings.py
index b42d06ec..8ce0ff3b 100644
--- a/lnbits/settings.py
+++ b/lnbits/settings.py
@@ -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")
diff --git a/lnbits/static/js/base.js b/lnbits/static/js/base.js
index cebd5cfc..ca30dfef 100644
--- a/lnbits/static/js/base.js
+++ b/lnbits/static/js/base.js
@@ -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))
     }
diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index e1faf2fe..0845b555 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -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>:
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index 2af63bab..3766d164 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -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 {
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 1e39b608..78bbd5d5 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -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"