diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 5fce97c..431bff6 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -28,8 +28,17 @@ const Layout = ({ }: ILayoutProps) => { const [isOpen, setIsOpen] = useState(false); const hamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300 dark:bg-neutral-200 bg-neutral-900`; + const [image, setImage] = useState(""); const { resolvedTheme } = useTheme(); + useEffect(() => { + setImage( + resolvedTheme === "dark" + ? "/calendarium-dark.svg" + : "/calendarium-light.svg" + ); + }, [resolvedTheme]); + return (
@@ -81,11 +90,7 @@ const Layout = ({ className="h-9 w-auto min-[400px]:h-10 sm:h-12" width={0} height={0} - src={ - resolvedTheme === "dark" - ? "/calendarium-dark.svg" - : "/calendarium-light.svg" - } + src={image} alt="Calendarium Logo" /> diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx index cf93f75..292caf7 100644 --- a/components/Sidebar/Sidebar.tsx +++ b/components/Sidebar/Sidebar.tsx @@ -39,6 +39,7 @@ const Sidebar = ({ const [checked, setChecked] = useState([]); const [promptInstall, setPromptInstall] = useState(null); + const [image, setImage] = useState(""); function clearSelection() { setClear(true); @@ -59,6 +60,14 @@ const Sidebar = ({ const { resolvedTheme } = useTheme(); + useEffect(() => { + setImage( + resolvedTheme === "dark" + ? "/calendarium-dark.svg" + : "/calendarium-light.svg" + ); + }, [resolvedTheme]); + return (