Update

src/components/LogoImage.tsx

@@ -1,15 +1,18 @@
-'use client'
-import { useEffect, useState } from 'react';
-import { usePathname } from 'next/navigation';
-import Image from 'next/image';
+"use client";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
 const LogoImage = () => {
-  const [src, setSrc] = useState('dark.svg');
+  const isDarkMode = document.documentElement.classList.contains("dark");
+  const baseSrc = isDarkMode ? "dark.svg" : "light.svg";
+  const [src, setSrc] = useState(baseSrc);
   const pathname = usePathname();
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const updateSrc = () => {
-    const isDarkMode = document.documentElement.classList.contains('dark');
-    const baseSrc = isDarkMode ? 'dark.svg' : 'light.svg';
-    const newSrc = pathname === '/chat/vn-vi' ? `../${baseSrc}` : baseSrc;
+    const isDarkMode = document.documentElement.classList.contains("dark");
+    const baseSrc = isDarkMode ? "dark.svg" : "light.svg";
+    const newSrc = pathname === "/chat/vn-vi" ? `../${baseSrc}` : baseSrc;
     setSrc(newSrc);
   };
 
@@ -23,7 +26,10 @@ const LogoImage = () => {
     });
 
     // Observe changes in attributes on the html element
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
 
     // Clean up the observer on component unmount
     return () => observer.disconnect();
@@ -40,4 +46,4 @@ const LogoImage = () => {
   );
 };
 
-export default LogoImage;
+export default LogoImage;

src/components/mode-toggle.tsx

@@ -1,21 +1,26 @@
-'use client'
-import { useEffect, useState } from 'react';
-import Moon  from "./Moon";
-import Sun  from "./Sun";
+"use client";
+import { useEffect, useState } from "react";
+import Moon from "./Moon";
+import Sun from "./Sun";
 import { Button } from "@/components/ui/button";
 import { useTheme } from "next-themes";
 const ModeToggle = () => {
   const { setTheme } = useTheme();
-  const [icontoggle, setIcon] = useState(<Moon/>);
+  const isDarkMode = document.documentElement.classList.contains("dark");
+  const check_theme = isDarkMode ? "light" : "dark";
+  const check_icon = isDarkMode ? <Moon /> : <Sun />;
+
+  const [icontoggle, setIcon] = useState(check_icon);
+  const [thememode, setThememode] = useState(check_theme);
 
   const updateIcon = () => {
-    const isDarkMode = document.documentElement.classList.contains('dark');
-    setIcon(isDarkMode ? <Moon/> : <Sun/>);
+    const isDarkMode = document.documentElement.classList.contains("dark");
+    setIcon(isDarkMode ? <Moon /> : <Sun />);
   };
 
   const toggleTheme = () => {
-	const isDarkMode = document.documentElement.classList.contains('dark');
-	setTheme(isDarkMode ? "light" : "dark");
+    const isDarkMode = document.documentElement.classList.contains("dark");
+    setTheme(isDarkMode ? "light" : "dark");
     updateIcon(); // Update icon when theme is toggled
   };
 
@@ -29,14 +34,21 @@ const ModeToggle = () => {
     });
 
     // Observe changes in attributes on the html element
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
 
     // Clean up the observer on component unmount
     return () => observer.disconnect();
   }, []); // Include an empty dependency array
 
   return (
-    <div onClick={toggleTheme} aria-label="Toggle Theme" className="cursor-pointer">
+    <div
+      onClick={toggleTheme}
+      aria-label="Toggle Theme"
+      className="cursor-pointer"
+    >
       {icontoggle}
     </div>
   );