diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f27b7607d6..83f4fbafb3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -26,7 +26,7 @@ export default function RootLayout({ > - + {children} diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx index c7225e3933..6dc2157061 100644 --- a/src/components/mode-toggle.tsx +++ b/src/components/mode-toggle.tsx @@ -7,17 +7,18 @@ import { useTheme } from "next-themes"; const ModeToggle = () => { const { setTheme, theme } = useTheme(); const check_theme = theme === "dark" ? : ; - const [icontoggle, setIcon] = useState(check_theme); + const [icontoggle, setIcon] = useState(theme === "dark" ? : ); // eslint-disable-next-line react-hooks/exhaustive-deps const updateIcon = () => { - const check_theme = theme === "dark" ? : ; + setIcon(theme === "dark" ? : ); }; const toggleTheme = () => { const isDarkMode = document.documentElement.classList.contains("dark"); + updateIcon(); setTheme(isDarkMode ? "light" : "dark"); - updateIcon(); // Update icon when theme is toggled + // Update icon when theme is toggled }; useEffect(() => { @@ -45,7 +46,7 @@ const ModeToggle = () => { aria-label="Toggle Theme" className="cursor-pointer" > - {theme === "dark" ? : } + {icontoggle} ); };