added: dark toggle working

9 files changed, 190 insertions, 45 deletions

diff --git a/src/app.css b/src/app.css
index 307df282..e8627298 100644
--- a/src/app.css
+++ b/src/app.css
@@ -113,17 +113,17 @@ html {
 
 @media (min-width: 720px) {
   ::-webkit-scrollbar {
-      width: 10px;
+      width: 12px;
     }
 }
 
 
 ::-webkit-scrollbar-thumb {
-  background-color: #000;
+  background-color: #555;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #F9F9F9;
+  background-color: #000;
 }
 
 /* SCROLL BAR */
diff --git a/src/components/buttons/ThemeToggle.svelte b/src/components/buttons/ThemeToggle.svelte
new file mode 100644
index 00000000..d62744c0
--- /dev/null
+++ b/src/components/buttons/ThemeToggle.svelte
@@ -0,0 +1,28 @@
+<!-- <button {...$$restProps}>toggle</button> -->
+<button
+    class="text-gray-300 dark:!text-gray-600 hover:bg-gray-100 dark:!hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 border-2 border-gray-600 bg-black dark:!bg-white dark:!border-gray-300 dark:!focus:ring-gray-700 rounded-full text-sm p-2.5 transition-all"
+    {...$$restProps}
+>
+    <svg
+    class="w-5 h-5 dark:hidden"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    >
+    <path
+        d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
+    ></path>
+    </svg>
+    <svg
+    class="w-5 h-5 hidden dark:!block"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    >
+    <path
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+    ></path>
+    </svg>
+</button>
\ No newline at end of file
diff --git a/src/hooks.server.js b/src/hooks.server.js
new file mode 100644
index 00000000..dca44977
--- /dev/null
+++ b/src/hooks.server.js
@@ -0,0 +1,29 @@
+
+export const handle = (async ({ event, resolve }) => {
+	let theme = "dark";
+
+	const newTheme = event.url.searchParams.get("theme");
+	const cookieTheme = event.cookies.get("colortheme");
+
+	if (newTheme) {
+		theme = newTheme;
+	} else if (cookieTheme) {
+		theme = cookieTheme;
+	}
+
+	if (theme) {
+		return await resolve(event, {
+			transformPageChunk: ({ html }) => {
+                const modifiedHtml = html.replace(/<html[^>]*>/, (match) => {
+                    // Ensure the class attribute exists or add it if missing
+                    return match.includes('class="')
+                        ? match.replace(/class="[^"]*"/, `class="${theme}"`)
+                        : match.replace('>', ` class="${theme}">`);
+                });
+                return modifiedHtml;
+            }
+		});
+	}
+
+	return await resolve(event);
+})
\ No newline at end of file
diff --git a/src/lib/shadcn/components/ui/switch/index.js b/src/lib/shadcn/components/ui/switch/index.js
new file mode 100644
index 00000000..7745ca39
--- /dev/null
+++ b/src/lib/shadcn/components/ui/switch/index.js
@@ -0,0 +1,6 @@
+import Root from "./switch.svelte";
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/src/lib/shadcn/components/ui/switch/switch.svelte b/src/lib/shadcn/components/ui/switch/switch.svelte
new file mode 100644
index 00000000..69c08b03
--- /dev/null
+++ b/src/lib/shadcn/components/ui/switch/switch.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/shadcn/utils";
+	let className = undefined;
+	export let checked = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...$$restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
index 904e543d..aac596a2 100644
--- a/src/routes/+page.server.js
+++ b/src/routes/+page.server.js
@@ -1,4 +1,27 @@
 // export const prerender = true;
-export let load = async () => {
-  return { faqs: ["cost", "compatibility", "safety", "pos", "bitcoin"] };
+import { redirect } from "@sveltejs/kit";
+
+export let load = async ({ cookies }) => {
+	let colorThemeSelected = "dark";
+	if (cookies.get("colortheme")) {
+		colorThemeSelected = cookies.get("colortheme");
+	}
+
+  return { faqs: ["cost", "compatibility", "safety", "pos", "bitcoin"], colorThemeSelected: colorThemeSelected };
 };
+
+export const actions = {
+	setTheme: async ({ url, cookies }) => {
+		const theme = url.searchParams.get("theme");
+		const redirectTo = url.searchParams.get("redirectTo");
+
+		if (theme) {
+			cookies.set("colortheme", theme, {
+				path: "/",
+				maxAge: 60 * 60 * 24 * 365,
+			});
+		}
+
+		throw redirect(303, redirectTo ?? "/");
+	},
+};
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f5df9d4f..1b1d8901 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,12 @@
 <script>
+    import { enhance } from "$app/forms";
 	import * as Accordion from "$lib/shadcn/components/ui/accordion";
 	import { Separator } from "$lib/shadcn/components/ui/separator";
+	import { page } from '$app/stores';
 	import { scroll } from '$lib/utils';
+    import ThemeToggle from "../components/buttons/ThemeToggle.svelte";
 	
+	export let data;
 	let about, faq;
 	let askedQuestionsAccordionValue = "item-0"
 
@@ -12,6 +16,27 @@
 		{id: 2, title: "When do my funds settle?", description: "It's free to register an account and receive payments. We charge a 0.1% conversion fee if you withdraw regular bitcoin to lightning or vice versa."}
 	]
 
+	let themeSelected = data.colorThemeSelected;
+	let toggleThemeForm;
+
+	function toggleThemeSelected() {
+		themeSelected = themeSelected === "light" ? "dark" : "light"; 
+	}
+
+	function submitUpdateTheme ({ action }) {
+		const theme = action.searchParams.get('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");
+		}
+
+		toggleThemeSelected()
+	}
+
 </script>
 
 <svelte:head>
@@ -50,9 +75,15 @@
 </div>
 
 <!-- nav -->
-<nav class="navbar navbar-expand-lg bg-transparent py-3">
+<nav class="navbar navbar-expand-lg dark:bg-black py-3 ">
 	<div class="container-xxl px-lg-5 px-sm-4 px-3">
-		<a class="navbar-brand site_logo" href="#"><img src="images/logo.png" alt="" /></a>
+		<a class="navbar-brand site_logo" href="#">
+			{#if data.colorThemeSelected == "light"}
+				<img src="images/logo.png" alt="" />
+			{:else}
+				<img src="images/logo-white.png" alt="" />
+			{/if}
+		</a>
 		<button
 			class="navbar-toggler border-0 shadow-none"
 			type="button"
@@ -65,33 +96,40 @@
 			<div class="py-4 pb-5 px-3 d-lg-none d-flex justify-content-end w-100">
 				<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" />
 			</div>
-			<ul class="navbar-nav text-lg-start text-center mx-auto mb-2 mb-lg-0">
+			<ul class="navbar-nav text-lg-start text-center mx-auto mb-2 mb-lg-0 dark:text-white">
 				<li class="nav-item me-lg-5 mb-lg-0 mb-4">
-					<a class="nav-link active" href="#">How it works</a>
+					<a class="nav-link active dark:!text-white" href="#">How it works</a>
 				</li>
 				<li class="nav-item me-lg-5 mb-lg-0 mb-4">
-					<a class="nav-link" href="" on:click={() => scroll(faq)}>F.A.Q.</a>
+					<a class="nav-link dark:!text-white" href="" on:click={() => scroll(faq)}>F.A.Q.</a>
 				</li>
 				<li class="nav-item">
-					<a class="nav-link" href="" on:click={() => scroll(about)}>About</a>
+					<a class="nav-link dark:!text-white" href="" on:click={() => scroll(about)}>About</a>
 				</li>
 			</ul>
 			<div
-				class="d-flex justify-content-lg-end justify-content-center nav_btn pt-lg-0 pt-5"
+				class="flex items-center gap-4 lg:pt-0"
 				role="search"
 			>
-				<a href="/register" class="btn_black"><span>get started</span></a>
-				<a href="/login" class="btn_white"><span>sign in</span></a>
+			<a href="/register" class="btn_black"><span class="dark:!bg-white dark:!text-black dark:!border-black dark:!border-2">get started</span></a>
+			<a href="/login" class="btn_white"><span class="dark:!bg-black dark:!text-white dark:!border-white dark:!border-2">sign in</span></a>
+			<form method="POST" bind:this={toggleThemeForm} use:enhance={submitUpdateTheme} >
+				{#if themeSelected && themeSelected == "dark"}
+					<ThemeToggle on:click={toggleThemeSelected} formaction="/?/setTheme&theme=light&redirectTo={$page.url.pathname}" />
+				{:else if themeSelected && themeSelected == "light"}
+					<ThemeToggle on:click={toggleThemeSelected} formaction="/?/setTheme&theme=dark&redirectTo={$page.url.pathname}" />
+				{/if}
+			</form>
 			</div>
 		</div>
 	</div>
 </nav>
 
 <!-- hero -->
-<div class="site_hero pt-md-5 pt-4">
+<div class="site_hero pt-md-5 pt-4 dark:bg-black">
 	<div class="container-lg px-sm-4 px-3 pt-md-5 mb-16  text-center">
 		<h1
-			class="text-center text-black f_bebas_neue text-uppercase fw-bold letter_space_2 display-3 lh-1"
+			class="text-center dark:text-white f_bebas_neue text-uppercase fw-bold letter_space_2 display-3 lh-1"
 		>
 			The easiest way to get <br />
 			started with bitcoin.
@@ -109,7 +147,7 @@
 </div>
 
 <!-- first grid -->
-<section class="py-4">
+<section class="py-4 dark:bg-black">
 	<div class="container-lg px-sm-4 px-3">
 		<div class="row justify-content-center">
 			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
@@ -147,13 +185,13 @@
 </section>
 
 <!-- lightning network -->
-<section class="pt-md-5" bind:this={about}>
+<section class="pt-md-5 dark:bg-black" bind:this={about}>
 	<div class="container-lg px-sm-4 px-3">
 		<div class="row align-items-center justify-content-center flex-md-row flex-column-reverse">
 			<div class="col-md-7 mb-md-0 mb-4">
 				<div>
 					<h6 class="f_bebas_neue txt_purple">Say Goodbye to Waiting</h6>
-					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-3 lh-1">
+					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 lh-1">
 						Lightning Network <br />
 						Brings Instant Payments
 					</h2>
@@ -164,22 +202,22 @@
 					</p>
 
 					<div class="mt-4 sec_btn flex gap-x-3 gap-y-3 flex-wrap">
-						<a href="#" class="btn_white f_bebas_neue"><span>Learn More</span></a>
-						<a href="/register" class="btn_black f_bebas_neue"><span>Get Started</span></a>
+						<a href="#" class="btn_white f_bebas_neue"><span class="dark:!bg-black dark:!text-white dark:!border-white dark:!border-2">Learn More</span></a>
+						<a href="/register" class="btn_black f_bebas_neue"><span class="dark:!bg-white dark:!text-black dark:!border-black dark:!border-2">Get Started</span></a>
 					</div>
 				</div>
 			</div>
 
 			<div class="col-md-5 mb-md-0 mb-5 scale_img_rig">
 				<div>
-					<img src="images/swapee-sec-calculator.png" class="hover:scale-[1.015] transition-all duration-500 ease-in-out" alt="" />
+					<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-calculator.png" : "images/swapee-sec-calculator-dark.png"} class="hover:scale-[1.015] transition-all duration-500 ease-in-out" alt="" />
 				</div>
 			</div>
 		</div>
 	</div>
 </section>
 
-<section class="pt-5 bg_light">
+<section class="pt-5 bg_light dark:!bg-[#0D0D0D]">
 	<div class="container-lg px-sm-4 px-3">
 		<div class="row align-items-center justify-content-center">
 			<div class="col-md-5">
@@ -191,8 +229,8 @@
 			<div class="col-md-7 mb-md-0 mb-4">
 				<div>
 					<h6 class="f_bebas_neue txt_purple">Quick and painless</h6>
-					<h2 class="h1 f_bebas_neue fw-bold text-black br_md_none mb-3 letter_space_2 lh-1">
-						Simple to use
+					<h2 class="h1 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 letter_space_2 lh-1">
+						Simple to uses
 					</h2>
 					<p class="txt_slate_blue mb-4">
 						Just enter an amount in your local currency, share the QR code and you’re done. We do
@@ -201,8 +239,8 @@
 					</p>
 
 					<div class="mt-4 sec_btn flex gap-x-3 gap-y-3 flex-wrap">
-						<a href="#" class="btn_white f_bebas_neue"><span>Learn More</span></a>
-						<a href="/register" class="btn_purple f_bebas_neue"><span>Get Started</span></a>
+						<a href="#" class="btn_white f_bebas_neue"><span >Learn More</span></a>
+						<a href="/register" class="btn_purple f_bebas_neue"><span >Get Started</span></a>
 					</div>
 				</div>
 			</div>
@@ -210,10 +248,10 @@
 	</div>
 </section>
 
-<section class="sec_3 position-relative">
+<section class="sec_3 position-relative dark:bg-black">
 	<div class="col-md-5 d-xxl-none d-md-block d-none position-absolute img_position">
 		<div>
-			<img src="images/swapee-sec-3-img.png" alt="" class="hover:scale-[0.985] transition-all duration-500 ease-in-out" />
+			<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-3-img.png" : "images/swapee-sec-3-img-dark.png"} alt="" class="hover:scale-[0.985] transition-all duration-500 ease-in-out" />
 		</div>
 	</div>
 
@@ -222,7 +260,7 @@
 			<div class="col-md-6 mb-md-0">
 				<div>
 					<h6 class="f_bebas_neue txt_purple">Customized & Personalized</h6>
-					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-3 lh-1">
+					<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-3 lh-1">
 						Brand it your way!
 					</h2>
 					<p class="txt_slate_blue">
@@ -232,41 +270,41 @@
 					</p>
 
 					<div class="sec_btn mt-4 flex gap-x-3 flex-wrap">
-						<a href="#" class="btn_white f_bebas_neue mb-3"><span>Learn More</span></a>
-						<a href="/register" class="btn_black f_bebas_neue mb-3"><span>Get Started</span></a>
+						<a href="#" class="btn_white f_bebas_neue mb-3"><span class="dark:!bg-black dark:!text-white dark:!border-white dark:!border-2">Learn More</span></a>
+						<a href="/register" class="btn_black f_bebas_neue mb-3"><span class="dark:!bg-white dark:!text-black dark:!border-black dark:!border-2">Get Started</span></a>
 					</div>
 				</div>
 			</div>
 
 			<div class="col-md-6 mb-md-0 mb-4 overflow-hidden">
 				<div class="d-xxl-block d-md-none d-block">
-					<img src="images/swapee-sec-3-img.png" alt="" />
+					<img src={data.colorThemeSelected == "light" ? "images/swapee-sec-3-img.png" : "images/swapee-sec-3-img-dark.png"} alt="" class="hover:scale-[0.985] transition-all duration-500 ease-in-out" />
 				</div>
 			</div>
 		</div>
 	</div>
 </section>
 
-<section class="py-5 bg_light">
+<section class="py-5 bg_light dark:!bg-[#0D0D0D]">
 	<div class="container-lg px-sm-4 px-3" bind:this={faq}>
 		<div class="row align-items-center justify-content-center">
 			<div class="col-12 text-center">
 				<h6 class="f_bebas_neue txt_purple">This might help</h6>
-				<h2 class="h1 letter_space_2 f_bebas_neue fw-bold text-black br_md_none mb-5 lh-1">
+				<h2 class="h1 letter_space_2 f_bebas_neue fw-bold dark:text-white br_md_none mb-5 lh-1">
 					Frequently asked <br /> questions
 				</h2>
 			</div>
 
 			<Accordion.Root class="w-full flex flex-col gap-3" bind:value={askedQuestionsAccordionValue} >
 				{#each askedQuestionsAccordion as askedQuestionAccordion }
-					<Accordion.Item value={`item-${askedQuestionAccordion.id}`} class="bg-white rounded-[10px] border-[1px] border-gray-300 px-4">
+					<Accordion.Item value={`item-${askedQuestionAccordion.id}`} class="bg-white dark:!bg-black rounded-[10px] border-[1px] border-gray-300 px-4">
 						<Accordion.Trigger class="py-0">
-							<h2 class="text-base pt-3 pb-3 font-bold border-b-black {askedQuestionsAccordionValue == `item-${askedQuestionAccordion.id}` ? 'border-b-2' : ''}">{askedQuestionAccordion.title}</h2>
+							<h2 class="text-base pt-3 pb-3 font-bold border-b-black dark:!border-b-swapee-purple {askedQuestionsAccordionValue == `item-${askedQuestionAccordion.id}` ? 'border-b-2' : ''}">{askedQuestionAccordion.title}</h2>
 						</Accordion.Trigger>
 						<Accordion.Content class="text-base text-slate-500 mt-0">
-							<Separator orientation="horizontal" class="mt-0 mb-3" />
+							<Separator orientation="horizontal" class="mt-0 mb-3 bg-purple-950" />
 							<p class="mb-0">{askedQuestionAccordion.description}</p>
-						</Accordion.Content>
+						</Accordion.Content>	
 					</Accordion.Item>
 				{/each}
 			</Accordion.Root>
@@ -275,9 +313,9 @@
 </section>
 
 <!-- bitcoin_location -->
-<div class="bitcoin_location">
+<div class="bitcoin_location dark:bg-black bg-map-light dark:!bg-map-dark bg-no-repeat">
 	<div class="container-lg px-sm-4 px-3">
-		<h2 class="h3 text-center text-black f_bebas_neue fw-bold letter_space_2">
+		<h2 class="h3 text-center dark:text-white f_bebas_neue fw-bold letter_space_2">
 			Real-World Bitcoin Locations
 		</h2>
 		<p class="text-center opacity-75 mb-md-5 mb-4">
@@ -286,8 +324,8 @@
 			with <span class="fs_18 fw-bold">Swapee!</span>
 		</p>
 		<div class="d-flex justify-content-center align-items-start flex-wrap">
-			<a href="#" class="btn_line me-sm-3 me-2 mb-4">Business Listings</a>
-			<a href="#" class="btn_black"><span class="px-sm-5">Get Listed</span></a>
+			<a href="#" class="btn_line me-sm-3 me-2 mb-4 dark:!text-white">Business Listings</a>
+			<a href="#" class="btn_black"><span class="px-sm-5 dark:!bg-white dark:!text-black dark:!border-black dark:!border-2">Get Listed</span></a>
 		</div>
 	</div>
 </div>
diff --git a/src/swapee/css/style.css b/src/swapee/css/style.css
index ba9e10d3..e435068d 100644
--- a/src/swapee/css/style.css
+++ b/src/swapee/css/style.css
@@ -91,7 +91,6 @@ body{
 #offcanvas ul li a{
     font-size: 14px;
     font-weight: 600;
-    color: var(--bs-black);
     text-transform: uppercase;
     font-family: 'Work Sans', sans-serif;
     position: relative;
@@ -231,7 +230,7 @@ body{
     align-items: center;
     padding-top: 90px;
     padding-bottom: 90px;
-    background: url("../img/map.png") no-repeat;
+    background: url("../img/footer-logo.png") no-repeat;
     background-size: cover;
 }
 
diff --git a/src/swapee/img/map-dark.png b/src/swapee/img/map-dark.png
new file mode 100644
index 00000000..08a00dd5
--- /dev/null
+++ b/src/swapee/img/map-dark.png