dark mode

5 files changed, 13 insertions, 14 deletions

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index ca0b5f90..4316c2bb 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -10,6 +10,7 @@
     passwordPrompt,
     password,
     pin,
+    theme,
   } from "$lib/store";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
@@ -112,7 +113,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="pb-20">
+<main class="pb-20 min-h-screen" data-theme={$theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
     <slot />
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 7de6ec37..527c814b 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -41,9 +41,7 @@
     </div>
 
     <a href={`/account/savings`} class="contents">
-      <button
-        class="rounded-2xl py-5 px-6 hover:opacity-80 flex w-full justify-center bg-primary"
-      >
+      <button class="btn btn-primary">
         <div class="mx-auto flex gap-2">
           <Icon icon="plus" style="w-8 mx-auto" />
           <div class="my-auto text-xl whitespace-nowrap">
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index d27df639..519e9547 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -113,7 +113,7 @@
         {#each contacts as c}
           <a href={`/pay/${c.username}`}>
             <div
-              class="border-b p-2 last:border-b-0 hover:bg-gray-100 rounded-2xl"
+              class="border-b p-2 last:border-b-0 hover:bg-base-200 rounded-2xl"
             >
               <div class="flex">
                 <div>
diff --git a/src/routes/(app)/settings/[...tab]/+page.svelte b/src/routes/(app)/settings/[...tab]/+page.svelte
index 0a3a6ddf..27e4e9b9 100644
--- a/src/routes/(app)/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/settings/[...tab]/+page.svelte
@@ -220,7 +220,7 @@
             <button
               type="button"
               class="hover:opacity-80"
-              class:text-black={tab === name ||
+              class:text-primary={tab === name ||
                 (tab === "shopify" && name === "pos")}
               >{$t(`user.settings.${key}`)}</button
             >
diff --git a/src/routes/(app)/settings/[...tab]/_security.svelte b/src/routes/(app)/settings/[...tab]/_security.svelte
index 6b44f830..eec178ad 100644
--- a/src/routes/(app)/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/settings/[...tab]/_security.svelte
@@ -200,7 +200,7 @@
       notify={false}
     />
   {:else}
-    <button type="button" class="primary" on:click={togglePin}
+    <button type="button" class="btn btn-primary" on:click={togglePin}
       ><Icon icon="lock" style="mr-1" />
       {user.haspin
         ? $t("user.settings.disablePIN")
@@ -225,17 +225,17 @@
       <b>{otp.secret}</b>
     </div>
 
-    <button type="button" class="primary" on:click={startConfirming2fa}>
+    <button type="button" class="btn btn-primary" on:click={startConfirming2fa}>
       <Icon icon="numpad" style="w-8 mr-1" />
       <div class="my-auto">Confirm</div>
     </button>
   {:else if user.twofa}
-    <button type="button" class="primary" on:click={startDisabling2fa}>
+    <button type="button" class="btn btn-primary" on:click={startDisabling2fa}>
       <Icon icon="mobile" style="w-8 mr-1" />
       <div class="my-auto">{$t("user.settings.twofaDisable")}</div>
     </button>
   {:else}
-    <button type="button" class="primary" on:click={startEnabling2fa}>
+    <button type="button" class="btn btn-primary" on:click={startEnabling2fa}>
       <Icon icon="mobile" style="w-8 mr-1" />
       <div class="my-auto">{$t("user.settings.twofaSetup")}</div>
     </button>
@@ -287,8 +287,8 @@
     {$t("user.settings.nostrDescription")}
   </p>
 
-  <div class="flex">
-    <button type="button" class="primary" on:click={toggleNsec}>
+  <div class="flex gap-2">
+    <button type="button" class="btn btn-primary" on:click={toggleNsec}>
       {#if revealNsec}
         <Icon icon="eye-off" style="mr-1 w-6 my-auto" />
         {$t("user.settings.hideNsec")}
@@ -298,7 +298,7 @@
       {/if}
     </button>
 
-    <button type="button" class="primary" on:click={toggleImporting}>
+    <button type="button" class="btn btn-primary" on:click={toggleImporting}>
       <Icon icon="save" style="mr-1 w-6 my-auto" />
       {$t("user.settings.import")}
     </button>
@@ -313,7 +313,7 @@
       {nsec}
     </div>
 
-    <button type="button" class="primary" on:click={() => copy(nsec)}>
+    <button type="button" class="btn btn-primary" on:click={() => copy(nsec)}>
       <Icon icon="copy" style="mr-1 w-6 my-auto" />
       Copy
     </button>