From 5c80d3b511d7f83486d0f195400f382e5b721ec3 Mon Sep 17 00:00:00 2001
From: Murillo Pinheiro de Oliveira <murillop.o06@gmail.com>
Date: Sun, 18 Feb 2024 19:50:45 -0300
Subject: updated: dark theme

---
 src/app.css                                        | 28 +++++++++--
 src/components/AppHeader.svelte                    | 35 ++++++-------
 src/components/Balance.svelte                      |  4 +-
 src/components/Numpad.svelte                       |  8 +--
 src/components/Password.svelte                     | 14 +++---
 src/components/Pin.svelte                          |  6 +--
 src/components/Pinpad.svelte                       | 12 ++---
 src/components/Toggle.svelte                       |  6 ++-
 .../(app)/[username]/(profile)/+layout.svelte      | 10 ++--
 src/routes/(app)/[username]/(profile)/+page.svelte | 10 ++--
 .../[username]/payments/[...page]/+page.svelte     | 36 +++++++-------
 .../[username]/receive/[...param]/+page.svelte     |  2 +-
 .../[username]/settings/[...tab]/+page.server.js   | 11 +++-
 .../[username]/settings/[...tab]/+page.svelte      | 12 +++--
 .../[username]/settings/[...tab]/_account.svelte   | 29 ++++++-----
 .../(app)/[username]/settings/[...tab]/_pos.svelte | 58 +++++++++++++++++++---
 .../[username]/settings/[...tab]/_security.svelte  | 56 ++++++++++-----------
 src/routes/(app)/forgot/+page.svelte               | 15 +++---
 src/routes/(app)/login/+page.svelte                | 26 ++++++----
 src/routes/(app)/register/+page.svelte             | 45 +++++++++--------
 src/routes/(app)/send/[...text]/+page.svelte       | 18 +++----
 src/routes/(app)/support/+page.svelte              | 16 +++---
 22 files changed, 274 insertions(+), 183 deletions(-)

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index e8627298..629b12e3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -77,6 +77,12 @@
   }
 }
 
+@layer components {
+  .input-swapee {
+    @apply bg-primary text-gray-700 dark:text-gray-100 dark:bg-stone-700 border-0 focus:outline-none focus:ring-2 hover:ring-2 ring-swapee-purple ring-offset-swapee-purple ease-in-out transition-all duration-500;
+  }
+}
+
 @font-face {
   font-family: "PublicSans";
   src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf")
@@ -117,15 +123,31 @@ html {
     }
 }
 
-
 ::-webkit-scrollbar-thumb {
-  background-color: #555;
+  background-color: #222;
+}
+
+.dark > body {
+  background-color: #000
 }
 
-::-webkit-scrollbar-track {
+.dark > body::-webkit-scrollbar-thumb {
+  background-color: #fff;
+}
+
+/* to paint the profile page, because the way the page is built, the only way is to paint the body tag :/ */
+.dark > body::-webkit-scrollbar-track {
   background-color: #000;
 }
 
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+    transition: background-color 600000s 0s, color 600000s 0s;
+}
+input[data-autocompleted] {
+    background-color: transparent !important;
+}
+
 /* SCROLL BAR */
 
 input,
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 51607030..143e45eb 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -41,36 +41,36 @@
 
 {#if !$loading}
   <header
-    class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover mb-20"
+    class="bg-gradient-to-r {$colorTheme} dark:!from-violet-600 dark:!to-swapee-purple h-[175px] w-full relative bg-cover mb-20"
     style:background-image={bg}
   >
     <nav class="flex justify-end items-center gap-x-2 xs:gap-x-4 p-5">
       {#if user}
         <a href={`/${user.username}`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="home" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="home" style="mx-auto w-6 md:w-8 dark:invert" />
           </button>
         </a>
         <a href={`/${user.username}/receive`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/receive`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="numpad" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="numpad" style="mx-auto w-6 md:w-8 dark:invert" />
           </button>
         </a>
         <a href={`/${user.username}/payments`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/payments`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'} relative"
-            ><Icon icon="clock" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="clock" style="mx-auto w-6 md:w-8 dark:invert" />
             {#if $newPayment}
               <span class="absolute top-0 right-0">
                 <span class="flex h-3 w-3">
@@ -87,17 +87,17 @@
         </a>
         <a href={`/send`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/send`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="send" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="send" style="mx-auto w-6 md:w-8 dark:invert" />
           </button>
         </a>
         <div class="relative">
           <OutClick on:outclick={() => (showMenu = false)}>
             <button
-              class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+              class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
                 .url.pathname === `/${user.username}` ||
               $page.url.pathname === `/${user.username}/settings` ||
               $page.url.pathname === `/support`
@@ -106,36 +106,37 @@
                     showMenu ? 'opacity-80' : ''
                   }`}"
               on:click={() => (showMenu = !showMenu)}
-              ><Icon icon="menu" style="mx-auto w-6 md:w-8" />
+              ><Icon icon="menu" style="mx-auto w-6 md:w-8 dark:invert" />
             </button>
 
             <div
               class="{showMenu
                 ? 'block'
-                : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z-50"
+                : 'hidden'} absolute top-14 right-0 bg-white dark:bg-black dark:border-2 dark:border-gray-50 rounded-3xl p-8 shadow-xl z-50"
             >
               <ul class="space-y-5 w-48">
                 {#each menuButtons as { href, icon, key }}
                   <li>
                     <a {href} data-sveltekit-prefetch="off">
                       <button
-                        class="flex justify-center items-center font-semibold hover:opacity-80"
-                        ><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)}
+                        class="flex justify-center items-center font-semibold hover:opacity-80 dark:hover:opacity-70"
+                        ><Icon {icon} style="mr-2 w-6 md:w-8 dark:invert" /> {$t(key)}
                       </button>
                     </a>
                   </li>
                 {/each}
               </ul>
-              <hr class="my-4" />
+              <hr class="my-4 dark:border-white" />
               <a href="/">
-                <img src="/images/logo.svg" alt="Swapee" class="w-32" />
+                <img src="/images/logo.svg" alt="Swapee" class="w-32 dark:hidden" />
+                <img src="/images/logo-white.png" alt="Swapee" class="w-32 hidden dark:block" />
               </a>
             </div>
           </OutClick>
         </div>
       {:else}
         <a href={`/login?redirect=${$page.url.pathname}`}>
-          <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm"
+          <button class="bg-white dark:bg-black px-5 py-2 rounded-xl font-semibold text-sm"
             >{$t("nav.signIn")}</button
           >
         </a>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 98a04ef6..d72f10e6 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -21,13 +21,13 @@
   {:else}
     <div class="text-5xl font-bold tabular-nums">
       {#if isNaN(rate)}
-        <div class="text-gray-200">&mdash;</div>
+        <div class="text-gray-200 ">&mdash;</div>
       {:else}
         {f((user.balance * rate) / sats, user.currency)}
       {/if}
     </div>
 
-    <div class="text-secondary text-2xl">
+    <div class="text-secondary dark:text-gray-300 text-2xl">
       ⚡️{s(user.balance)}
     </div>
   {/if}
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 901d11ba..5690609c 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -198,7 +198,7 @@
         />
       </div>
       <div class="mt-2">
-        <span class="text-secondary mr-1"
+        <span class="text-secondary dark:text-gray-300 mr-1"
           >{fiat ? sat(amount) : f(amountFiat, currency)}</span
         >
         <button
@@ -213,7 +213,7 @@
                   : 0;
             }
             fiat = !fiat;
-          }}><Icon icon="swap" style="inline hover:opacity-80" /></button
+          }}><Icon icon="swap" style="inline hover:opacity-80 dark:invert" /></button
         >
       </div>
     </div>
@@ -223,7 +223,7 @@
 				{#if value === arrow}
 					<button
 						type="button"
-						class="bg-gray-100 rounded-xl py-4 px-8 font-semibold active:bg-black active:flex justify-center items-center hover:opacity-80"
+						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black active:flex justify-center items-center hover:opacity-80"
 						on:click={() => handleInput(value)}
 					>
 						<Left />
@@ -231,7 +231,7 @@
 				{:else}
 					<button
 						type="button"
-						class="bg-gray-100 rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
 						on:click={() => handleInput(value)}>{value}</button
 					>
 				{/if}
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index da65d718..81714904 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -23,10 +23,10 @@
 </script>
 
 <div
-  class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"
+  class="fixed inset-0 bg-gray-600 dark:bg-stone-950 dark:bg-opacity-90 bg-opacity-50 overflow-y-auto h-full w-full z-20"
 >
   <div
-    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-stone-800 dark:border-0 space-y-5"
   >
     <h1 class="text-center text-2xl font-semibold">
       Please enter your password
@@ -38,7 +38,7 @@
             name="password"
             type="text"
             required
-            class="bg-primary"
+            class="bg-primary dark:bg-stone-700 dark:border-gray-50"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -48,7 +48,7 @@
             name="password"
             type="password"
             required
-            class="bg-primary"
+            class="bg-primary dark:bg-stone-700 dark:border-gray-50"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -57,7 +57,7 @@
         <button
           type="button"
           on:click={() => (revealPassword = !revealPassword)}
-          class="absolute right-5 top-6"
+          class="absolute right-5 dark:invert {revealPassword ? 'top-[18px]' : 'top-[16px]'}"
         >
           <Icon icon={revealPassword ? "eye" : "eye-off"} />
         </button>
@@ -65,7 +65,7 @@
       <div class="w-full flex">
         <button
           type="button"
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 dark:text-gray-50 rounded-xl font-semibold py-3 w-40 hover:opacity-80 mx-auto"
           on:click={cancel}
           on:keydown={cancel}
         >
@@ -73,7 +73,7 @@
         </button>
         <button
           type="submit"
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 bg-black text-white dark:bg-gray-50 dark:text-black rounded-xl font-semibold py-3 w-40 hover:opacity-80 mx-auto"
         >
           <div class="my-auto">Submit</div>
         </button>
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 9938f9a1..58a669e8 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -43,16 +43,16 @@
 
 {#if loaded}
   <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
+    class="fixed inset-0 bg-gray-600 dark:bg-stone-950 dark:bg-opacity-90 bg-opacity-50 overflow-y-auto h-full w-full z-50"
   >
     <div
-      class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+      class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white dark:bg-stone-800 dark:border-0 space-y-5"
     >
       <h1 class="text-center text-2xl font-semibold">{title}</h1>
       <Pinpad bind:v={p} {cancel} />
       <div class="w-full flex">
         <button
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 dark:text-gray-50 rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
           on:click|preventDefault={cancel}
         >
           <div class="my-auto">Cancel</div>
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 641ddb2b..1dc20366 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -45,14 +45,14 @@
           use:focus
           bind:value={v}
           type="password"
-          class="outline-none border-0 text-center py-0"
+          class="outline-none border-0 text-center py-0 dark:bg-stone-800 dark:text-white"
           pattern="[0-9]+"
         />
       {:else}
         <input
           on:keydown={validate}
           bind:value={v}
-          class="outline-none border-0 text-center py-0"
+          class="outline-none border-0 text-center py-0 dark:bg-stone-800 dark:text-white" 
           type="text"
           pattern="[0-9]+"
         />
@@ -60,18 +60,18 @@
       <button
         type="button"
         on:click={() => (hide = !hide)}
-        class="absolute -right-5 top-5"
+        class="absolute -right-5 dark:invert {hide ? 'top-5' : 'top-[22px]'}"
       >
         <Icon icon={hide ? "eye-off" : "eye"} style="w-8" />
       </button>
     </div>
 
-    <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
+    <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto">
       {#each numPad as value}
         {#if value === arrow}
           <button
             type="button"
-            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
+            class="bg-primary dark:bg-stone-700 rounded-xl py-4 px-8 font-semibold dark:text-gray-50 active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
             on:click={() => handleInput(value)}
           >
             <Left />
@@ -79,7 +79,7 @@
         {:else}
           <button
             type="button"
-            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+            class="bg-primary dark:bg-stone-700 rounded-xl py-4 px-8 font-semibold dark:text-gray-50 active:bg-black dark:active:bg-stone-900 active:text-white hover:opacity-80"
             on:click={() => handleInput(value)}>{value}</button
           >
         {/if}
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index 2f92837d..1d34ccd6 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -3,7 +3,9 @@
   export let value;
 </script>
 
-<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer" on:click>
   <input
     type="checkbox"
     bind:checked={value}
@@ -12,6 +14,6 @@
     class="sr-only peer"
   />
   <div
-    class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-500"
+    class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-stone-800 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-500"
   />
 </label>
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 37483caa..a780f994 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -151,11 +151,11 @@
     <div class="flex justify-center gap-2">
       <a href={`/${subject.pubkey}/follows`}
         ><b>{subject.follows.length}</b>
-        <span class="text-secondary">{$t("user.following")}</span></a
+        <span class="text-secondary dark:text-gray-300">{$t("user.following")}</span></a
       >
       <a href={`/${subject.pubkey}/followers`}
         ><b>{subject.followers.length}</b>
-        <span class="text-secondary">{$t("user.followers")}</span></a
+        <span class="text-secondary dark:text-gray-300">{$t("user.followers")}</span></a
       >
     </div>
 
@@ -249,16 +249,16 @@
 
 {#if currency}
   <div
-    class="flex fixed w-full px-4 bg-white py-2 pb-3 bottom-0 bg-opacity-90 tabular-nums"
+    class="flex fixed w-full px-4 bg-white dark:bg-black py-2 pb-3 bottom-0 bg-opacity-90 tabular-nums"
   >
-    <div class="text-secondary flex mr-auto">
+    <div class="text-secondary dark:text-gray-300 flex mr-auto">
       <div class="flex mr-1">
         <div class="my-auto mr-1">1</div>
         <img src="/images/bitcoin.svg" class="w-5 my-auto" alt="Bitcoin" />
       </div>
       <div>= {f(rates[currency], currency)}</div>
     </div>
-    <div class="text-secondary flex ml-auto">
+    <div class="text-secondary dark:text-gray-300 flex ml-auto">
       <div class="flex">
         <div class="mr-1">⚡️{s((1 * sats) / rates[currency])} =</div>
         <div>{f(1, currency)}</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 6a89818a..2812100c 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -84,8 +84,8 @@
       </div>
       <div class="space-y-8 mt-8">
         {#if !user.balance}
-          <p class="text-secondary text-lg max-w-2xl text-center lg:text-start mx-auto">
-            {$t("user.welcome")}
+          <p class="text-secondary dark:text-gray-300 text-lg max-w-2xl text-center lg:text-start mx-auto">
+            {$t("user.welcome")} 
           </p>
         {/if}
 
@@ -94,10 +94,10 @@
         >
           <a href={`/send`} class="w-full md:w-40">
             <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full "
             >
               <div class="mx-auto my-auto flex">
-                <Icon icon="send" style="my-auto h-6 mr-2" />
+                <Icon icon="send" style="my-auto h-6 mr-2 text-red-300 dark:invert" />
                 <div class="my-auto">{$t("user.dashboard.send")}</div>
               </div>
             </button>
@@ -108,7 +108,7 @@
               class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
             >
               <div class="mx-auto flex">
-                <Icon icon="numpad" style="my-auto h-6 mr-2" />
+                <Icon icon="numpad" style="my-auto h-6 mr-2 dark:invert" />
                 <div class="my-auto mt-1">{$t("user.dashboard.receive")}</div>
               </div>
             </button>
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 3237011b..75a0e3d0 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -127,15 +127,15 @@
   </h1>
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
-    <div class="flex text-md text-secondary relative">
-      <div class="mx-auto flex justify-center w-full gap-1">
+    <div class="flex text-md text-secondary dark:text-gray-300 relative">
+      <div class="mx-auto flex justify-center w-full gap-3">
         {#each presets as { start, end, title }, i}
           <a
             class:active={selection === i}
             href={`/${user.username}/payments/${getUnixTime(start) + "/"}1`}
           >
             <button
-              class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]"
+              class="text-sm md:text-lg rounded-full border dark:border-white py-2 px-4 hover:opacity-80 min-w-[72px]"
             >
               <div class="my-auto">{title}</div>
             </button>
@@ -153,7 +153,7 @@
             class:active={parseInt(p) === i + 1}
           >
             <div
-              class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center"
+              class="py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center"
             >
               {i + 1}
             </div>
@@ -170,13 +170,13 @@
               <div class="font-bold" class:text-red-800={p.amount < 0}>
                 {f(Math.abs(p.amount) * (p.rate / sats), p.currency)}
                 {#if p.tip}
-                  <span class="text-sm text-secondary">
+                  <span class="text-sm text-secondary dark:text-gray-300">
                     +{Math.round((p.tip / Math.abs(p.amount)) * 100)}%
                   </span>
                 {/if}
               </div>
 
-              <div class="text-secondary">
+              <div class="text-secondary dark:text-gray-300">
                 {sat(Math.abs(p.amount) + (p.tip || 0))}
               </div>
             </div>
@@ -184,7 +184,7 @@
             <div class="flex my-auto">
               {#if p.type === types.pot}
                 <a href={`/pot/${p.memo}`}>
-                  <div class="text-secondary flex">
+                  <div class="text-secondary dark:text-gray-300 flex">
                     <div class="my-auto mr-1">
                       <img src="/images/moneypot.png" class="w-12" alt="Pot" />
                     </div>
@@ -197,7 +197,7 @@
                   <div class="my-auto">
                     <Avatar user={p.with} size={16} disabled={true} />
                   </div>
-                  <div class="my-auto ml-1 text-secondary">
+                  <div class="my-auto ml-1 text-secondary dark:text-gray-300">
                     {p.with.username}
                   </div>
                 </div>
@@ -207,9 +207,9 @@
                   class="w-24 border-4 border-transparent mr-1"
                   alt="Bitcoin"
                 />
-                <div class="my-auto text-secondary">{p.memo}</div>
+                <div class="my-auto text-secondary dark:text-gray-300">{p.memo}</div>
               {:else}
-                <div class="text-secondary flex">
+                <div class="text-secondary dark:text-gray-300 flex">
                   {#if p.type === types.lightning}
                     <div class="text-3xl">⚡️</div>
                   {:else if p.type === types.bitcoin}
@@ -241,7 +241,7 @@
               {/if}
             </div>
 
-            <div class="text-secondary text-right text-sm my-auto">
+            <div class="text-secondary dark:text-gray-300 text-right text-sm my-auto">
               <div>
                 {format(new Date(p.created), "h:mm aaa")}
               </div>
@@ -252,14 +252,14 @@
           </div>
         </a>
       {:else}
-        <p class="text-secondary text-lg text-center">{$t("payments.empty")}</p>
+        <p class="text-secondary dark:text-gray-300 text-lg text-center">{$t("payments.empty")}</p>
       {/each}
     </div>
 
     <div class="grid grid-cols-3 w-full text-center">
-      <span class="text-lg text-secondary">{$t("payments.total")}</span>
-      <span class="text-lg text-secondary">{$t("payments.presentValue")}</span>
-      <span class="text-lg text-secondary">{$t("payments.gainLoss")}</span>
+      <span class="text-lg text-secondary dark:text-gray-300">{$t("payments.total")}</span>
+      <span class="text-lg text-secondary dark:text-gray-300">{$t("payments.presentValue")}</span>
+      <span class="text-lg text-secondary dark:text-gray-300">{$t("payments.gainLoss")}</span>
 
       {#each Object.keys(totals) as c}
         {@const total = totals[c]["fiat"]}
@@ -274,10 +274,10 @@
     </div>
 
     <button
-      class="ml-auto rounded-full border py-2 px-4 w-36 hover:opacity-80 flex mx-auto"
+      class="ml-auto rounded-full border dark:border-white py-2 px-4 w-36 hover:opacity-80 flex mx-auto"
       on:click={csv}
     >
-      <Icon icon="save" style="opacity-50 mr-2 my-auto" />
+      <Icon icon="save" style="opacity-50 mr-2 my-auto dark:invert" />
       <div class="my-auto">{$t("payments.export")}</div>
     </button>
   </div>
@@ -285,7 +285,7 @@
 
 <style>
   .active * {
-    @apply bg-black text-white border-black;
+    @apply !bg-black dark:!bg-white !text-white dark:!text-black border-black;
   }
 
   .payments {
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 7a27bd67..149c762e 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -48,7 +48,7 @@
     <button
       bind:this={submit}
       type="submit"
-      class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold
+      class="bg-black dark:bg-swapee-purple text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold
 				opacity-100 hover:opacity-80"
     >
       {$t("payments.next")}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index b9717b82..49b2ba0a 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -12,12 +12,21 @@ export const actions = {
   default: async ({ cookies, request }) => {
     let form = await fd(request);
 
+    let currentTheme = form.currentTheme;
+
     if (form.tab === "pos") {
       form.notify = form.notify === "on";
       form.nip5 = form.nip5 === "on";
       form.prompt = form.prompt === "on";
     }
 
+    if (currentTheme) {
+			cookies.set("colortheme", currentTheme, {
+				path: "/",
+				maxAge: 60 * 60 * 24 * 365,
+			});
+		}
+
     let user = { ...(await get("/me", auth(cookies))), ...form };
 
     try {
@@ -27,5 +36,5 @@ export const actions = {
     }
 
     return { user, success: true };
-  },
+  }
 };
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index 54a2d71c..e0514320 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -30,6 +30,7 @@
 
   let { user, token, rates, tab, cookies } = data;
   let prev;
+  let currentTheme = "";
 
   $: update(data);
   let update = () => {
@@ -189,6 +190,7 @@
 >
   <input type="hidden" name="pin" value={$pin} />
   <input type="hidden" name="tab" value={tab} />
+  <input type="hidden" name="currentTheme" value={currentTheme} />
 
   <div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
     <div class="header">
@@ -197,13 +199,13 @@
       </h1>
 
       <div
-        class="font-bold flex justify-around items-center border-b pb-3 text-secondary"
+        class="font-bold flex justify-around items-center border-b dark:border-b-gray-50 pb-3 text-secondary"
       >
         {#each tabs.filter((t) => t.name !== "shopify") as { name, key }}
           <a href={`/${user.username}/settings/${name}`}>
             <button
               type="button"
-              class="hover:opacity-80"
+              class="hover:opacity-80 dark:text-gray-100"
               class:text-black={tab === name ||
                 (tab === "shopify" && name === "pos")}
               >{$t(`user.settings.${key}`)}</button
@@ -213,16 +215,16 @@
       </div>
     </div>
 
-    <svelte:component this={comp} {user} {rates} {submit} />
+    <svelte:component this={comp} {user} {rates} {submit} on:changeTheme={(e) => currentTheme = e.detail }/>
   </div>
 
   <div
-    class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
+    class="z-10 fixed bottom-0 bg-white dark:bg-black shadow border-t dark:border-t-gray-50 w-full flex justify-center items-center py-3"
   >
     <button
       bind:this={submit}
       type="submit"
-      class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+      class="border-2 border-black dark:bg-white dark:text-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
       class:bg-black={submitting}
     >
       {#if submitting}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 15ee7b0c..a4bb2b68 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -73,7 +73,7 @@
 </script>
 
 <div>
-  <label for="username" class="font-bold mb-1 block"
+  <label for="username" class="font-bold mb-3 block"
     >{$t("user.settings.username")}</label
   >
   <div class="flex mb-2">
@@ -81,26 +81,26 @@
       type="text"
       name="username"
       bind:value={user.username}
-      class="w-auto min-w-0 pr-1 grow"
+      class="w-auto min-w-0 pr-1 grow dark:bg-stone-800 dark:border-0"
     />
   </div>
 </div>
 
 <div>
-  <label for="display" class="font-bold mb-1 block"
+  <label for="display" class="font-bold mb-3 block"
     >{$t("user.settings.displayName")}</label
   >
-  <input type="text" name="display" bind:value={user.display} />
+  <input type="text" name="display" bind:value={user.display} class="dark:bg-stone-800 dark:border-0" />
 </div>
 
 <div class="space-y-1 relative">
   <label for="email" class="font-bold block">{$t("user.settings.email")}</label>
-  <p class="text-secondary">
+  <p class="text-secondary dark:text-gray-200">
     {$t("user.settings.emailDescription")}
   </p>
 
   <div class="relative">
-    <input type="text" name="email" bind:value={user.email} />
+    <input type="text" name="email" bind:value={user.email} class="dark:bg-stone-800 dark:border-0" />
     {#if user.verified}
       <Icon icon="check" style="absolute right-5 top-3 w-8" />
     {:else if user.email}
@@ -114,6 +114,7 @@
 
   <div class="flex">
     {#if $avatar || user.profile}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
         on:click={selectAvatar}
@@ -121,11 +122,12 @@
       >
         <img
           src={$avatar?.src || `/api/public/${user.profile}.webp`}
-          class="absolute w-full h-full object-cover object-center visible overflow-hidden"
+          class="absolute w-full h-full object-cover object-center visible overflow-hidden "
           alt={user.username}
         />
       </div>
     {:else}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer"
         on:click={selectAvatar}
@@ -138,7 +140,7 @@
       <!-- found missing translation -->
       <button
         type="button"
-        class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+        class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80 dark:border-white"
         on:click={selectAvatar}
         on:keydown={selectAvatar}>{$t("user.settings.select")}</button
       >
@@ -157,11 +159,12 @@
 </div>
 
 <div>
-  <div class="flex justify-between items-center">
+  <div class="flex justify-between items-center mb-3">
     <span class="font-bold">{$t("user.settings.bannerImage")}</span>
   </div>
 
   {#if $banner || user.banner}
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <img
       src={$banner ? $banner.src : `/api/public/${user.banner}.webp`}
       class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
@@ -170,8 +173,9 @@
       alt="Banner"
     />
   {:else}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
+      class="bg-gradient-to-r {$colorTheme} dark:!from-stone-800 dark:!to-stone-800 w-full h-48 mb-4 cursor-pointer hover:opacity-80"
       on:click={selectBanner}
       on:keydown={selectBanner}
       alt="Banner"
@@ -180,7 +184,7 @@
 
   <button
     type="button"
-    class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+    class="border dark:border-white rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80 "
     on:click={selectBanner}
     on:keydown={selectBanner}>{$t("user.settings.select")}</button
   >
@@ -197,7 +201,7 @@
 </div>
 
 <div>
-  <label for="address" class="font-bold mb-1 block"
+  <label for="address" class="font-bold mb-3 block"
     >{$t("user.settings.about")}</label
   >
   <textarea
@@ -205,5 +209,6 @@
     name="address"
     bind:value={user.address}
     placeholder={$t("user.settings.aboutPlaceholder")}
+    class="dark:bg-stone-800 dark:border-0 dark:placeholder:text-gray-300"
   />
 </div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index 539cfd5e..68b5e05f 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -1,30 +1,59 @@
 <script>
+	import { enhance } from '$app/forms';
   import Icon from "$comp/Icon.svelte";
   import LocaleSelector from "$comp/LocaleSelector.svelte";
   import Toggle from "$comp/Toggle.svelte";
   import { t } from "$lib/translations";
   import { success, fail } from "$lib/utils";
   import { page } from "$app/stores";
+  import { onMount } from 'svelte';
+  import ThemeToggle from '../../../../../components/buttons/ThemeToggle.svelte';
+  import { createEventDispatcher } from 'svelte'
+  const dispatch = createEventDispatcher()
 
   export let user, rates, submit;
 
   let fiats = Object.keys(rates);
+
+  let themeSelected;
+	let toggleThemeForm;
+  
+  onMount(() => {
+    themeSelected = document.documentElement.classList[0];
+  })
+
+	function toggleThemeSelected() {
+		themeSelected = themeSelected == "dark" ? "light" : "dark"; 
+    submitUpdateTheme(themeSelected);
+	}
+
+	function submitUpdateTheme(theme) {
+		const htmlClasses = document.documentElement.classList;
+		if (theme == "dark" && !(htmlClasses.contains("dark"))) {
+      htmlClasses.add("dark");
+      htmlClasses.remove("light");
+		} else if (theme == "light" && !(htmlClasses.contains("light"))) {
+			htmlClasses.add("light");
+			htmlClasses.remove("dark");
+		}
+    dispatch("changeTheme", theme)
+	}
 </script>
 
 <div>
-  <label for="language" class="font-bold block mb-1"
+  <label for="language" class="font-bold block mb-3"
     >{$t("user.settings.locale")}</label
   >
-  <LocaleSelector style="select-styles block py-3 w-full" />
+  <LocaleSelector style="select-styles block py-3 w-full dark:bg-stone-800 dark:border-0" />
 </div>
 
 <div>
-  <label for="currency" class="font-bold block mb-1"
+  <label for="currency" class="font-bold block mb-3 "
     >{$t("user.settings.localCurrency")}</label
   >
   <select
     name="currency"
-    class="select-styles block py-3 w-full"
+    class="select-styles block py-3 w-full dark:bg-stone-800 dark:border-0"
     value={user.currency}
   >
     {#each fiats as fiat}
@@ -33,12 +62,25 @@
   </select>
 </div>
 
+<div>
+  <div class="flex justify-between items-center">
+    <span class="font-bold">Dark Theme</span>
+    {#if themeSelected}
+      <button type="button" on:click={toggleThemeSelected} class="focus:ring-4 ring-gray-300 dark:ring-gray-800 rounded-full inline-flex relative items-center mr-5 cursor-pointer ">
+          <div
+          class="w-11 h-6 rounded-full peer  peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 {themeSelected == 'dark' ? ' dark:bg-green-500' : 'bg-gray-200 after:-translate-x-full'} after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 "
+          />
+      </button>
+		{/if}
+  </div>
+</div>
+
 <div>
   <div class="flex justify-between items-center">
     <span class="font-bold">{$t("user.settings.notifications")}</span>
     <Toggle id="notify" bind:value={user.notify} />
   </div>
-  <p class="text-secondary mt-1 w-9/12">
+  <p class="text-secondary dark:text-gray-200 mt-1 w-9/12">
     {$t("user.settings.notificationsDesc")}
   </p>
 </div>
@@ -48,7 +90,7 @@
     <span class="font-bold">{$t("user.settings.tipPrompt")}</span>
     <Toggle id="prompt" bind:value={user.prompt} />
   </div>
-  <p class="text-secondary mt-1 w-9/12">
+  <p class="text-secondary dark:text-gray-200 mt-1 w-9/12">
     {$t("user.settings.tipPromptDescription")}
   </p>
 </div>
@@ -58,7 +100,7 @@
     <span class="font-bold">{$t("user.settings.publishNip5")}</span>
     <Toggle id="nip5" bind:value={user.nip5} />
   </div>
-  <p class="text-secondary mt-1 w-9/12">
+  <p class="text-secondary dark:text-gray-200 mt-1 w-9/12">
     {$t("user.settings.nip5a")}
     <span class="font-bold">{user.username}@{$page.url.host}</span>
     {$t("user.settings.nip5b")}
@@ -70,7 +112,7 @@
     type="button"
     class="flex rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full gap-2 my-5 justify-center"
   >
-    <img src="/icons/shopify.svg" class="w-8" />
+    <img src="/icons/shopify.svg" alt="" class="w-8" />
     <div class="my-auto">Shopify Integration</div>
   </button>
 </a>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index 38bf726c..52565af8 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -155,19 +155,19 @@
 <input type="hidden" name="confirm" bind:value={password} />
 
 <div class="relative mb-5">
-  <label for="password" class="block font-bold block mb-1"
+  <label for="password" class="block font-bold mb-3 "
     >{$t("user.settings.newPassword")}</label
   >
   {#if revealPassword}
-    <input name="password" type="text" bind:value={password} />
+    <input name="password" type="text" bind:value={password} class="dark:bg-stone-800 dark:border-0" />
   {:else}
-    <input name="password" type="password" bind:value={password} />
+    <input name="password" type="password" bind:value={password} class="dark:bg-stone-800 dark:border-0" />
   {/if}
   <button
     type="button"
     on:click={togglePassword}
     on:keydown={togglePassword}
-    class="absolute right-5 top-11"
+    class="absolute right-5 dark:invert-[95%] {revealPassword ? 'top-[54px]' : 'top-[52px]'} "
   >
     <Icon icon={revealPassword ? "eye" : "eye-off"} />
   </button>
@@ -179,7 +179,7 @@
       ? $t("user.settings.verifyPIN")
       : $t("user.settings.securityPIN")}</span
   >
-  <p class="text-secondary mb-1">
+  <p class="text-secondary dark:text-gray-200 mb-4">
     {$t("user.settings.securityPINDescription")}
   </p>
   {#if verifying}
@@ -192,8 +192,8 @@
       notify={false}
     />
   {:else}
-    <button type="button" class="primary" on:click={togglePin}
-      ><Icon icon="lock" style="mr-1" />
+    <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={togglePin}
+      ><Icon icon="lock" style="mr-1 dark:invert" />
       {user.haspin
         ? $t("user.settings.disablePIN")
         : $t("user.settings.enablePIN")}</button
@@ -206,7 +206,7 @@
     <label for="locktime" class="font-bold mb-1"
       >{$t("user.settings.autoLock")}</label
     >
-    <p class="text-secondary mb-1">
+    <p class="text-secondary dark:text-gray-200 mb-1">
       {$t("user.settings.autoLockDescription")}
     </p>
     <select
@@ -224,8 +224,8 @@
 {/if}
 
 <div>
-  <span class="font-bold mb-1">{$t("user.settings.twofa")}</span>
-  <p class="text-secondary mb-4">
+  <span class="font-bold mb-4">{$t("user.settings.twofa")}</span>
+  <p class="text-secondary dark:text-gray-200 mb-4">
     {$t("user.settings.twofaDescription")}
   </p>
 
@@ -239,18 +239,18 @@
       <b>{otp.secret}</b>
     </div>
 
-    <button type="button" class="primary" on:click={startConfirming2fa}>
-      <Icon icon="mobile" style="mr-1" />
+    <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={startConfirming2fa}>
+      <Icon icon="mobile" style="mr-1 dark:invert" />
       Confirm
     </button>
   {:else if user.twofa}
-    <button type="button" class="primary" on:click={startDisabling2fa}>
-      <Icon icon="mobile" style="mr-1" />
+    <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={startDisabling2fa}>
+      <Icon icon="mobile" style="mr-1 dark:invert" />
       {$t("user.settings.twofaDisable")}
     </button>
   {:else}
-    <button type="button" class="primary" on:click={startEnabling2fa}>
-      <Icon icon="mobile" style="mr-1" />
+    <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={startEnabling2fa}>
+      <Icon icon="mobile" style="mr-1 dark:invert" />
       {$t("user.settings.twofaSetup")}
     </button>
   {/if}
@@ -271,22 +271,22 @@
     >{$t("user.settings.seedPhrase")}</label
   >
 
-  <p class="text-secondary mb-1">
+  <p class="text-secondary dark:text-gray-200 mb-4">
     {$t("user.settings.seedDescription")}
   </p>
 
-  <button type="button" class="primary" on:click={toggleSeed}>
-    <Icon icon="warning" style="mr-1 w-6 my-auto" />
+  <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={toggleSeed}>
+    <Icon icon="warning" style="mr-2 w-6 my-auto dark:invert" />
     {revealSeed ? $t("user.settings.hideSeed") : $t("user.settings.revealSeed")}
   </button>
 
   {#if revealSeed}
-    <div class="text-lg">
+    <div class="text-lg my-6">
       {mnemonic}
     </div>
 
-    <button type="button" class="primary" on:click={() => copy(mnemonic)}>
-      <Icon icon="copy" style="mr-1 w-6 my-auto" />
+    <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={() => copy(mnemonic)}>
+      <Icon icon="copy" style="mr-1 w-6 my-auto dark:invert" />
       Copy
     </button>
   {/if}
@@ -297,22 +297,22 @@
     >{$t("user.settings.nostrKeys")}</label
   >
 
-  <p class="text-secondary mb-1">
+  <p class="text-secondary dark:text-gray-200 mb-4">
     {$t("user.settings.nostrDescription")}
   </p>
 
-  <button type="button" class="primary" on:click={toggleNsec}>
-    <Icon icon="warning" style="mr-1 w-6 my-auto" />
+  <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={toggleNsec}>
+    <Icon icon="warning" style="mr-2 w-6 my-auto dark:invert" />
     {revealNsec ? $t("user.settings.hideNsec") : $t("user.settings.revealNsec")}
   </button>
 
   {#if revealNsec}
-    <div class="text-lg break-all">
+    <div class="text-lg break-all my-6">
       {nsec}
     </div>
 
-    <button type="button" class="primary" on:click={() => copy(nsec)}>
-      <Icon icon="copy" style="mr-1 w-6 my-auto" />
+    <button type="button" class="py-2 px-4 font-bold rounded-full mx-auto border-[1px] flex border-gray-200 dark:border-gray-50" on:click={() => copy(nsec)}>
+      <Icon icon="copy" style="mr-1 w-6 my-auto dark:invert" />
       Copy
     </button>
   {/if}
diff --git a/src/routes/(app)/forgot/+page.svelte b/src/routes/(app)/forgot/+page.svelte
index 378262cc..4ef773aa 100644
--- a/src/routes/(app)/forgot/+page.svelte
+++ b/src/routes/(app)/forgot/+page.svelte
@@ -14,15 +14,16 @@
 <div class="pt-10">
   <div class="w-[243px] mx-auto mb-10">
     <a href="/">
-      <Icon icon="logo" />
+      <Icon icon="logo-dark" style="hidden dark:block" />
+      <Icon icon="logo" style="dark:hidden block" />
     </a>
   </div>
 
   <div class="flex justify-center items-center">
     <div
-      class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"
+      class="shadow-xl dark:bg-stone-800  rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"
     >
-      <h1 class="text-2xl font-bold text-center">{$t("login.reset")}</h1>
+      <h1 class="text-2xl font-bold text-center dark:text-gray-50">{$t("login.reset")}</h1>
 
       {#if form?.error}
         <div class="text-red-600 text-center" in:fly>
@@ -31,7 +32,7 @@
       {/if}
 
       {#if form?.success}
-        <div class="text-secondary">
+        <div class="text-secondary dark:text-gray-200">
           A password reset link will be sent to your email if we have it on
           file.
         </div>
@@ -39,7 +40,7 @@
         <div class="flex w-full">
           <a
             href="/login"
-            class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80 text-center"
+            class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80 text-center dark:bg-swapee-purple active:scale-95 transition-all"
           >
             Continue
           </a>
@@ -52,7 +53,7 @@
               name="email"
               type="text"
               required
-              class="bg-primary"
+              class="input-swapee mt-1"
               bind:value={email}
               use:focus
               autocapitalize="none"
@@ -61,7 +62,7 @@
 
           <button
             type="submit"
-            class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
+            class="bg-black dark:bg-swapee-purple active:scale-95 transition-all text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
             disabled={loading}
           >
             {#if loading}
diff --git a/src/routes/(app)/login/+page.svelte b/src/routes/(app)/login/+page.svelte
index cebbf41c..4a232598 100644
--- a/src/routes/(app)/login/+page.svelte
+++ b/src/routes/(app)/login/+page.svelte
@@ -67,8 +67,11 @@
     applyAction(result);
     loading = false;
   }
+
+  
 </script>
 
+
 {#if need2fa}
   <Pin bind:value={token} title="Enter 2FA Code" {cancel} notify={false} />
 {/if}
@@ -76,15 +79,16 @@
 <div class="pt-10">
   <div class="w-[243px] mx-auto mb-10">
     <a href="/">
-      <Icon icon="logo" />
+      <Icon icon="logo-dark" style="hidden dark:block" />
+      <Icon icon="logo" style="dark:hidden block" />
     </a>
   </div>
 
   <div class="flex justify-center items-center">
     <div
-      class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"
+      class="shadow-xl dark:bg-stone-800 rounded-3xl p-5 sm:p-10 pb-8 sm:pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px] "
     >
-      <h1 class="text-2xl font-bold text-center">{$t("login.signIn")}</h1>
+      <h1 class="text-2xl font-bold text-center dark:text-gray-50">{$t("login.signIn")}</h1>
 
       {#if form?.error}
         <div class="text-red-600 text-center" in:fly>
@@ -112,7 +116,7 @@
             name="username"
             type="text"
             required
-            class="bg-primary"
+            class="input-swapee mt-1"
             bind:value={username}
             use:focus
             autocapitalize="none"
@@ -128,7 +132,7 @@
               name="password"
               type="text"
               required
-              class="bg-primary"
+              class="input-swapee mt-1"
               bind:value={$password}
               autocapitalize="none"
             />
@@ -137,7 +141,7 @@
               name="password"
               type="password"
               required
-              class="bg-primary"
+              class="input-swapee mt-1"
               bind:value={$password}
               autocapitalize="none"
             />
@@ -145,21 +149,21 @@
           <button
             type="button"
             on:click={() => (revealPassword = !revealPassword)}
-            class="absolute right-5 top-10"
+            class="absolute right-5 {revealPassword ? 'top-[46px]' : 'top-11'} dark:invert"
           >
             <Icon icon={revealPassword ? "eye" : "eye-off"} />
           </button>
         </div>
 
         <div class="flex justify-end items-center">
-          <a href="/forgot" class="underline underline-offset-4 text-black"
+          <a href="/forgot" class="underline underline-offset-4 text-black dark:text-blue-400"
             >{$t("login.forgotUserOrPassword")}</a
           >
         </div>
 
         <button
           type="submit"
-          class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
+          class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80 dark:bg-swapee-purple active:scale-95 transition-all"
           disabled={loading}
           bind:this={btn}
         >
@@ -171,11 +175,11 @@
         </button>
       </form>
 
-      <p class="text-secondary text-center font-medium">
+      <p class="text-secondary dark:text-gray-200 text-center font-medium">
         {$t("login.haveAccount")}
         <a
           href={"/register"}
-          class="block md:inline text-black underline underline-offset-4 hover:opacity-80"
+          class="block md:inline text-black dark:text-blue-400 underline underline-offset-4 hover:opacity-80"
         >
           {$t("login.register")}
         </a>
diff --git a/src/routes/(app)/register/+page.svelte b/src/routes/(app)/register/+page.svelte
index 5783059a..02f18222 100644
--- a/src/routes/(app)/register/+page.svelte
+++ b/src/routes/(app)/register/+page.svelte
@@ -155,15 +155,16 @@
 {/if}
 
 <div class="pt-4">
-  <div class="w-[243px] mx-auto">
+  <div class="w-[243px] mx-auto mb-10 mt-6">
     <a href="/">
-      <Icon icon="logo" />
+      <Icon icon="logo-dark" style="hidden dark:block mb-5" />
+      <Icon icon="logo" style="dark:hidden block" />
     </a>
   </div>
 
   <div class="flex justify-center items-center">
     <div
-      class="shadow-xl rounded-3xl p-4 pt-0 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"
+      class="shadow-xl dark:bg-stone-800 rounded-3xl p-5 sm:p-10 pb-8 sm:pb-12 pt-3 sm:pt-6 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"
     >
       <input
         type="file"
@@ -174,11 +175,13 @@
 
       <div class="relative">
         <button
-          class="absolute w-8 h-12 left-12 bg-white rounded top-12"
+          class="absolute w-8 h-12 left-[5%] min-[400px]:left-12 bg-white dark:bg-stone-700 rounded top-12"
           on:click={decr}
         >
-          <Icon icon="chevron-left" style="w-8 " />
+          <Icon icon="chevron-left" style="w-8 dark:invert" />
         </button>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div class="relative w-32 mx-auto" on:click={selectAvatar}>
           <button
             class="w-32 h-32 rounded-full border-4 border-white overflow-hidden flex mx-auto relative"
@@ -190,16 +193,16 @@
             />
           </button>
           <button
-            class="absolute bg-white rounded-full p-2 mx-auto right-0 bottom-0 z-10 bg-opacity-80"
+            class="absolute bg-white dark:bg-stone-700 rounded-full p-2 mx-auto right-0 bottom-0 z-10 bg-opacity-80"
           >
-            <Icon icon="upload" style="w-8" />
+            <Icon icon="upload" style="w-8 dark:invert" />
           </button>
         </div>
         <button
-          class="absolute w-8 h-12 right-12 bg-white rounded top-12"
+          class="absolute w-8 h-12 right-[5%] min-[400px]:right-12 bg-white dark:bg-stone-700 rounded top-12"
           on:click={incr}
         >
-          <Icon icon="chevron-left" style="w-8 rotate-180" />
+          <Icon icon="chevron-left" style="w-8 rotate-180 dark:invert" />
         </button>
       </div>
 
@@ -231,7 +234,7 @@
             name="username"
             type="text"
             required
-            class="bg-primary"
+            class="input-swapee mt-1"
             bind:value={username}
             on:focus={clear}
             autocapitalize="none"
@@ -239,10 +242,10 @@
           <button
             type="button"
             on:click={refresh}
-            class="absolute right-0 top-4"
+            class="absolute right-0 top-5"
             tabindex="5"
           >
-            <Icon icon="random" style="w-10 m-4" />
+            <Icon icon="random" style="w-10 m-4 dark:invert" />
           </button>
         </div>
 
@@ -256,7 +259,7 @@
               name="password"
               type="text"
               required
-              class="bg-primary"
+              class="input-swapee mt-1"
               bind:value={$password}
               autocapitalize="none"
             />
@@ -266,7 +269,7 @@
               name="password"
               type="password"
               required
-              class="bg-primary"
+              class="input-swapee mt-1"
               bind:value={$password}
               autocapitalize="none"
               on:focus={clear}
@@ -276,20 +279,20 @@
             type="button"
             tabindex="4"
             on:click={() => (revealPassword = !revealPassword)}
-            class="absolute right-0 top-4"
+            class="absolute right-0 {revealPassword ? 'top-[22px]' : 'top-5'}"
           >
-            <Icon icon={revealPassword ? "eye" : "eye-off"} style="m-6" />
+            <Icon icon={revealPassword ? "eye" : "eye-off"} style="m-6 dark:invert" />
           </button>
         </div>
 
-        <p class="text-secondary text-sm">
+        <p class="text-secondary dark:text-gray-200 text-sm">
           {$t("login.passwordRecommendation")}
         </p>
 
         <button
           tabindex="3"
-          type="submit"
-          class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
+          type="button"
+          class="bg-black dark:bg-swapee-purple text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80 active:scale-95 transition-all"
           disabled={loading}
           bind:this={btn}
         >
@@ -301,11 +304,11 @@
         </button>
       </form>
 
-      <p class="text-secondary text-center font-medium">
+      <p class="text-secondary dark:text-gray-200 text-center font-medium">
         {$t("login.haveAccount")}
         <a
           href={"/login"}
-          class="block md:inline text-black underline underline-offset-4 hover:opacity-80"
+          class="block md:inline text-black dark:text-blue-400 underline underline-offset-4 hover:opacity-80"
         >
           {$t("login.signIn")}
         </a>
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 343bffd5..400096f9 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -46,13 +46,13 @@
       </div>
     {/if}
 
-    <div class="mb-2">
+    <div class="mb-4">
       <input type="hidden" name="text" bind:value={text} />
 
       <textarea
         {placeholder}
         on:keypress={keypress}
-        class="w-full p-4 border rounded-xl h-48"
+        class="w-full p-4 border rounded-xl h-48 dark:bg-stone-800 placeholder:text-stone-300"
         bind:value={text}
         bind:this={textarea}
       />
@@ -65,9 +65,9 @@
       >
         <button
           type="button"
-          class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1 w-full"
+          class="flex border dark:border-white rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1 w-full"
         >
-          <Icon icon="qr" style="mr-2 w-6 my-auto invert" />
+          <Icon icon="qr" style="mr-2 w-6 my-auto invert dark:invert-0" />
           <div class="my-auto">{$t("user.send.makeQR")}</div>
         </button>
       </a>
@@ -75,19 +75,19 @@
       <a href="/scan" class="w-full">
         <button
           type="button"
-          class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1 w-full"
+          class="flex border dark:border-white rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1 w-full"
         >
-          <Icon icon="camera" style="mr-2 w-6 my-auto" />
+          <Icon icon="camera" style="mr-2 w-6 my-auto dark:invert" />
           <div class="my-auto">{$t("user.send.scan")}</div>
         </button>
       </a>
 
       <button
         type="button"
-        class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
+        class="flex border dark:border-white rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
         on:click={paste}
       >
-        <Icon icon="paste" style="mr-2 w-6 my-auto" />
+        <Icon icon="paste" style="mr-2 w-6 my-auto dark:invert" />
         <div class="my-auto">{$t("user.send.paste")}</div>
       </button>
 
@@ -96,7 +96,7 @@
         type="submit"
         class="{!text
           ? 'opacity-50'
-          : 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold"
+          : 'opacity-100 hover:opacity-80'} bg-black dark:bg-swapee-purple text-white border rounded-full px-6 py-2 font-bold"
       >
         {$t("user.send.next")}
       </button>
diff --git a/src/routes/(app)/support/+page.svelte b/src/routes/(app)/support/+page.svelte
index 4dc2e4d1..f637867b 100644
--- a/src/routes/(app)/support/+page.svelte
+++ b/src/routes/(app)/support/+page.svelte
@@ -77,7 +77,7 @@
       {$t("user.support.header")}
     </h1>
 
-		<p class="text-secondary text-lg">
+		<p class="text-secondary dark:text-gray-300 text-lg">
 			Fill out this form or email us directly at <a
 				class="underline"
 				href="mailto:support@swapee.me">support@swapee.me</a
@@ -85,12 +85,12 @@
 		</p>
 
     <form on:submit={submit}>
-      <div class="mb-4">
+      <div class="mb-6">
         <label for="account" class="font-semibold"
           >{$t("user.support.accountName")}</label
         >
         <input
-          class="bg-primary"
+          class="bg-primary dark:bg-stone-800 border-0 mt-3"
           type="text"
           name="account"
           required
@@ -98,12 +98,12 @@
         />
       </div>
 
-      <div class="mb-4">
+      <div class="mb-6">
         <label for="email" class="font-semibold"
           >{$t("user.support.email")}</label
         >
         <input
-          class="bg-primary"
+          class="bg-primary dark:bg-stone-800 border-0 mt-3"
           type="email"
           name="email"
           bind:value={email}
@@ -111,13 +111,13 @@
         />
       </div>
 
-      <div class="mb-4">
+      <div class="mb-6">
         <label for="message" class="font-semibold"
           >{$t("user.support.message")}</label
         >
         <textarea
           rows={5}
-          class="bg-primary"
+          class="bg-primary dark:bg-stone-800 border-0 mt-3"
           type="text"
           name="message"
           bind:value={message}
@@ -130,7 +130,7 @@
         disabled={!email || !message}
         class="g-recaptcha {!email || !message
           ? 'opacity-50'
-          : 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
+          : 'opacity-100'} bg-black dark:bg-white text-white dark:text-black font-bold rounded-xl py-3 w-full mx-auto {email &&
         message
           ? 'hover:opacity-80'
           : ''}">{$t("user.support.send")}</button
-- 
cgit v1.2.3