как при изминении цветовой темы что бы менялся цвет svg иконок(я сделал что то похожее на это, но есть проблема: меняется только после перезагрузки)

    "use client";

import React from "react";
import { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";

import gbitem from "../../../../public/img/auth/login/gbitem.png";

import { OpenEye } from "../OpenEyeSvg";
import { CloseEye } from "../CloseEyeSvg";
import { ExitSvg } from "../ExitSvg";

const LoginForm: React.FC = () => {
    const [passwordVisible, setPasswordVisible] = useState(false);
    const [storedTheme, setStoredTheme] = useState("");

    useEffect(() => {
        const handleThemeChange = () => {
            const themeFromLocalStorage = localStorage.getItem("theme");
            if (themeFromLocalStorage) {
                setStoredTheme(themeFromLocalStorage);
            }
        };

        window.addEventListener("storage", handleThemeChange);

        return () => {
            window.removeEventListener("storage", handleThemeChange);
        };
    }, []);

    useEffect(() => {
        const themeFromLocalStorage = localStorage.getItem("theme");
        if (themeFromLocalStorage) {
            setStoredTheme(themeFromLocalStorage);
        }
    }, [storedTheme]);

    const togglePasswordVisibility = () => {
        setPasswordVisible(!passwordVisible);
    };

    return (
        <>
            <div className="mt-24 mb-[160px] max-w-[530px]">
                <input
                    className="w-[502px] h-[80px] bg-transparent mt-[30px] pr-[24px] text-2xl rounded-[8px] font-bold pl-[24px] border-[1.5px] dark:border-white white: border-[#2F2F2F]"
                    type="text"
                    id="phone"
                    placeholder="Введите номер телефона"
                />
                <input
                    className="w-[502px] h-[80px] bg-transparent mt-[30px] pr-[24px] text-2xl rounded-[8px] font-bold pl-[24px] border-[1.5px] dark:border-white white: border-[#2F2F2F]"
                    id="password"
                    type={passwordVisible ? "text" : "password"}
                    placeholder="Введите пароль"
                />

                <form className="relative">
                    <button
                        type="button"
                        onClick={togglePasswordVisibility}
                        className="absolute top-[-40px] right-[32px] transform -translate-x-1/2 -translate-y-1/2"
                    >
                        {passwordVisible ? (
                            <CloseEye
                                color={
                                    storedTheme === "dark" ? "white" : "black"
                                }
                            />
                        ) : (
                            <OpenEye
                                color={
                                    storedTheme === "dark" ? "white" : "black"
                                }
                            />
                        )}
                    </button>
                </form>
                <Image
                    className="absolute top-0 right-0 opacity-60 z-10 pointer-events-none"
                    loading="eager"
                    src={gbitem}
                    width={995}
                    height={900}
                    alt="gbitem"
                />
            </div>
            <div className="flex flex-col">
                <button className="w-[256px] h-[68px] bg-gradient-to-r from-custom-purple to-custom-blue rounded-[8px] font-semibold text-2xl mb-[52px]">
                    Войти
                </button>

                <label className="flex items-center cursor-pointer">
                    <input
                        className="w-[27px] h-[27px] mr-[8px] dark:accent-white white:accent-[#2F2F2F]"
                        type="checkbox"
                    />
                    <span className="text-[14px] ">
                        Я согласен с
                        <span className="underline underline-offset-4 ml-[4px]">
                            условиями обработки данных
                        </span>
                    </span>
                </label>
            </div>
            <div className="flex mt-[40px] justify-center pb-[20px]">
                <p className="mr-[23px] font-semibold text-[24px]">
                    Нет аккаунта?
                </p>
                <div className="flex items-center">
                    <ExitSvg
                        color={storedTheme === "dark" ? "white" : "black"}
                    />
                    <Link
                        href={"/auth/sign-up"}
                        className="pdl-[3px] font-semibold text-[24px] cursor-pointer"
                    >
                        Зарегистрироваться
                    </Link>
                </div>
            </div>
        </>
    );
};
export default LoginForm;

    "use client";
import { useState, useEffect } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";

import MoonNotActive from "../../public/img/ThemeToggle/moon-not-active.svg";
import MoonActive from "../../public/img/ThemeToggle/moon-active.svg";
import SunNotActive from "../../public/img/ThemeToggle/sun-not-active.svg";
import SunActive from "../../public/img/ThemeToggle/sun-active.svg";

const ThemeToggle: React.FC = () => {
    const [darkMode, setDarkMode] = useState(true);

    const { setTheme } = useTheme();

    useEffect(() => {
        const storedTheme = localStorage.getItem("theme");
        if (storedTheme) {
            setDarkMode(storedTheme === "white");
            setTheme(storedTheme);
        }
    }, []);

    const toggleTheme = () => {
        setDarkMode(!darkMode);
        const themeName = darkMode ? "dark" : "white";
        setTheme(themeName);
        localStorage.setItem("theme", themeName);
    };

    return (
        <div className="w-[113px] h-[46px] flex justify-between items-center pb-[3px] p-[6px] pt-[3px] rounded-[12px] bg-[#2F2F2F] relative">
            <div
                className="absolute w-[38px] h-[40px] bg-[#FFFFFF] rounded-[8px] transition-transform duration-500 ease-in-out"
                style={{
                    transform:
                        darkMode === true
                            ? "translateX(0)"
                            : "translateX(63px)",
                }}
            ></div>

            <button
                className={`w-[38px] h-[40px] rounded-[8px] outline-none flex justify-center items-center ${
                    darkMode === true ? "z-20" : ""
                }`}
                onClick={toggleTheme}
            >
                <Image
                    src={darkMode === true ? SunActive : SunNotActive}
                    width={27}
                    height={27}
                    alt="Sun"
                />
            </button>

            <button
                className={`w-[38px] h-[40px] rounded-[8px] outline-none flex justify-center items-center ${
                    darkMode === false ? "z-20" : ""
                }`}
                onClick={toggleTheme}
            >
                <Image
                    src={darkMode === false ? MoonActive : MoonNotActive}
                    width={27}
                    height={27}
                    alt="Moon"
                />
            </button>
        </div>
    );
};

export default ThemeToggle;