Working on the profile module.

src/features/browser/theme-meta-updater.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {useTheme} from "next-themes";
+import {useEffect} from "react";
+import {authClient} from "@/lib/auth/auth-client";
+
+export function ThemeMetaUpdater() {
+    const {resolvedTheme, setTheme} = useTheme();
+    const {data: session} = authClient.useSession();
+
+    useEffect(() => {
+        if (!resolvedTheme) return;
+
+        const color = resolvedTheme === "dark" ? "#000000" : "#ffffff";
+
+        let tag = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
+        if (!tag) {
+            tag = document.createElement("meta");
+            tag.setAttribute("name", "theme-color");
+            document.head.appendChild(tag);
+        }
+        tag.setAttribute("content", color);
+    }, [resolvedTheme]);
+
+    useEffect(() => {
+        if (!session?.user?.theme) return;
+        setTheme(session.user.theme);
+    }, [session, resolvedTheme, setTheme]);
+
+
+    return null;
+}
+
+//
+// "use client"
+// import {useEffect, useState} from "react";
+// import {useTheme} from "next-themes";
+// import {authClient} from "@/lib/auth/auth-client";
+//
+// export function ThemeMetaUpdater() {
+//     const [mounted, setMounted] = useState(false);
+//     const {resolvedTheme, setTheme} = useTheme();
+//     const {data: session} = authClient.useSession();
+//
+//     useEffect(() => setMounted(true), []);
+//
+//     useEffect(() => {
+//         if (!mounted || !resolvedTheme) return;
+//         const color = resolvedTheme === "dark" ? "#000000" : "#ffffff";
+//         let tag = document.querySelector<HTMLMetaElement>('meta[name="theme-color"]');
+//         if (!tag) {
+//             tag = document.createElement("meta");
+//             tag.setAttribute("name", "theme-color");
+//             document.head.appendChild(tag);
+//         }
+//         tag.setAttribute("content", color);
+//     }, [mounted, resolvedTheme]);
+//
+//     useEffect(() => {
+//         if (!mounted || !session?.user?.theme) return;
+//         if (resolvedTheme !== session.user.theme) {
+//             setTheme(session.user.theme);
+//         }
+//     }, [mounted, session, setTheme]);
+//
+//     return null;
+// }

src/features/layout/Header.tsx

@@ -1,7 +1,7 @@
 import {notFound} from "next/navigation";
 
 import {SidebarTrigger} from "@/components/ui/sidebar";
-import {ModeToggle} from "@/features/theme/ModeToggle";
+import {ModeToggle} from "@/features/theme/mode-toggle";
 import {currentUser} from "@/lib/auth/current-user";
 import {BreadCrumbsWrapper} from "@/components/wrappers/common/bread-crumbs/bread-crumbs";
 import GitHubStarsButtonCustom from "@/components/wrappers/common/github/github-button";

src/features/theme/mode-toggle.tsx

@@ -2,13 +2,17 @@
 
 import * as React from "react"
 import {Moon, Sun} from "lucide-react"
-import {useTheme} from "next-themes"
-
 import {Button} from "@/components/ui/button"
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu"
+import {authClient} from "@/lib/auth/auth-client";
+import {toast} from "sonner";
 
 export function ModeToggle() {
-    const {setTheme} = useTheme()
+
+    const setTheme = async (theme: "light" | "dark" | "system") => {
+        toast.success("Your theme preference has been updated.");
+        await authClient.updateUser({theme: theme});
+    };
 
     return (
         <DropdownMenu>
@@ -33,3 +37,5 @@ export function ModeToggle() {
         </DropdownMenu>
     )
 }
+
+