From fa84accb7fb062f95aea12dabfb3d1b507bde454 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ph=E1=BA=A1m=20Quang=20Tr=C6=B0=E1=BB=9Dng=20An?= Date: Fri, 26 Jul 2024 16:02:37 +0700 Subject: [PATCH] Update --- src/app/layout.tsx | 2 +- src/components/mode-toggle.tsx | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) 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} ); };