feat(Header): add ThemeToggle component to the header for theme switching

refactor(ThemeToggle): update theme toggle logic to use resolvedTheme and improve accessibility with tooltips

src/features/layout/Header.tsx

@@ -5,6 +5,7 @@ import { Home, LogIn, UserPlus, LogOut, User } from "lucide-react";
 
 import { useI18n } from "locales/client";
 import Logo from "@public/logo.png";
+import { ThemeToggle } from "@/features/theme/ThemeToggle";
 import { ReleaseNotesDialog } from "@/features/release-notes";
 import { useLogout } from "@/features/auth/model/useLogout";
 import { useSession } from "@/features/auth/lib/auth-client";
@@ -53,6 +54,8 @@ export const Header = () => {
 
         <ReleaseNotesDialog />
 
+        <ThemeToggle />
+
         <div className="dropdown dropdown-end">
           <div className="btn btn-ghost btn-circle avatar" role="button" tabIndex={0}>
             <div className="w-8 rounded-full bg-primary text-primary-content !flex items-center justify-center text-sm font-medium">

src/features/theme/ThemeToggle.tsx

@@ -1,18 +1,23 @@
 "use client";
 
+import { useEffect } from "react";
 import { useTheme } from "next-themes";
-import { Moon, Sun } from "lucide-react";
+import { MoonIcon, SunIcon } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 
 export function ThemeToggle() {
-  const { setTheme, theme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    console.log("resolvedTheme:", resolvedTheme);
+  }, [resolvedTheme]);
 
   return (
-    <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")} variant="ghost">
-      <Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" />
-      <Moon className="hidden size-5 dark:block" />
-      <span className="sr-only">Toggle theme</span>
+    <Button className="rounded-full p-2 pr-2" onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")} variant="ghost">
+      <div className="tooltip" data-tip={resolvedTheme === "light" ? "Dark mode" : "Light mode"}>
+        {resolvedTheme === "light" ? <MoonIcon /> : <SunIcon />}
+      </div>
     </Button>
   );
 }