ui fix

src/lib/components/Feedback.svelte

@@ -96,7 +96,7 @@
 <div class="fixed z-100 bottom-8 sm:bottom-10 right-8 sm:right-16">
   <label
     for="feedbackInfo"
-    class="border border-gray-300 inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-400 dark:border-gray-700 dark:bg-primary shadow-xl ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
+    class="border border-gray-300 inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-semibold bg-gray-400 dark:border-gray-700 shadow-xl ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/routes/+layout.server.ts

@@ -1,15 +1,12 @@
-	import {  setMode,  } from "mode-watcher";
-
-
 export const load = ({ locals, cookies }) => {
   const { user, isUSRegion, wsURL } = locals;
-
-  setMode(cookies?.get("theme-mode"));
+  const themeMode = cookies.get("theme-mode") || "dark"; // Default to dark
 
   return {
     user: user || undefined,
     isUSRegion,
-    cookieConsent: cookies?.get("cookie-consent"),
+    cookieConsent: cookies.get("cookie-consent"),
     wsURL,
+    themeMode // Add theme mode to returned data
   };
-};
+};

src/routes/+layout.svelte

@@ -125,6 +125,7 @@
     typeof data?.cookieConsent !== "undefined" ? false : true;
 
   onMount(async () => {
+    setMode(data.themeMode);
     if (data?.user?.id) {
       await loadWorker();
       /*
@@ -240,30 +241,20 @@
 
 
 
-async function handleModeChange() {
-		if ($mode === "light") {
-			setMode("dark");
+ async function handleModeChange() {
+    const newMode = $mode === "light" ? "dark" : "light";
+    setMode(newMode);
 
-		} else {
-			setMode("light");
-		}
-
-    const postData = {
-      mode: $mode,
-    };
-
-    const response = await fetch("/api/theme-mode", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(postData),
-    }); // make a POST request to the server with the FormData object
-
-    const output = await response.json();
-    console.log(output)
-
-	}
+    try {
+      await fetch("/api/theme-mode", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mode: newMode })
+      });
+    } catch (error) {
+      console.error("Failed to update theme:", error);
+    }
+  }
 </script>
 
 <svelte:window bind:innerWidth={$screenWidth} />