dark mode

3 files changed, 20 insertions, 18 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 9dd37d7e..8ec0b5ed 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,6 +1,6 @@
 <script>
   import OutClick from "svelte-outclick";
-  import { banner, newPayment } from "$lib/store";
+  import { banner, theme, newPayment } from "$lib/store";
   import { goto } from "$app/navigation";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
@@ -14,19 +14,11 @@
   let menuButtons;
   $: if (user)
     menuButtons = [
-      {
-        key: "nav.settings",
-        icon: "settings",
-        href: `/settings`,
-      },
+      { key: "nav.settings", icon: "settings", href: `/settings` },
       { key: "nav.support", icon: "support", href: `/support` },
       { key: "nav.map", icon: "map", href: `/map` },
-      // {
-      //   key: "nav.messages",
-      //   icon: "message",
-      //   href: `/messages`,
-      // },
       { key: "nav.merch", icon: "shop", href: `https://coinosmerch.com` },
+      { key: "nav.dark", icon: "moon", href: `/dark` },
       { key: "nav.signOut", icon: "logout", href: `/logout` },
     ];
 
@@ -42,18 +34,20 @@
         : undefined;
 
   $: $page && (showMenu = false);
+
+  let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
 </script>
 
 {#if !$loading}
   <header
-    class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative bg-cover mb-20"
+    class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative bg-cover mb-20 text-secondary"
     style:background-image={bg}
   >
     <nav class="flex justify-end items-center space-x-4 p-5">
       {#if user}
         <a href={`/${user.username}`} data-sveltekit-preload-code="eager">
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-base p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
@@ -117,17 +111,25 @@
             <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-base-100 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-preload-code="eager">
+                    {#if key.includes("dark")}
                       <button
                         class="flex justify-center items-center font-semibold hover:opacity-80"
+                        on:click={dark}
                         ><Icon {icon} style="mr-2 w-6 sm:w-8" /> {$t(key)}
                       </button>
-                    </a>
+                    {:else}
+                      <a {href} data-sveltekit-preload-code="eager">
+                        <button
+                          class="flex justify-center items-center font-semibold hover:opacity-80"
+                          ><Icon {icon} style="mr-2 w-6 sm:w-8" /> {$t(key)}
+                        </button>
+                      </a>
+                    {/if}
                   </li>
                 {/each}
               </ul>
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index e91285da..a088c4ee 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -21,7 +21,7 @@
 
 <a href={link} class:pointer-events-none={disabled}>
   <div
-    class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r from-primary to-gradient flex justify-center items-center"
+    class="w-{s} h-{s} rounded-full border-4 border-base-100 overflow-hidden bg-gradient-to-r from-primary to-gradient flex justify-center items-center"
   >
     <img
       {src}
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 72913999..232e53eb 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <header
-  class="w-full lg:w-5/6 py-5 mx-auto fixed sticky z-10 top-0 bg-white/90"
+  class="w-full lg:w-5/6 py-5 mx-auto fixed sticky z-10 top-0"
   bind:this={header}
 >
   <nav class="block lg:flex justify-between items-center">