how do I change colors based on changing value in local storage in react

Question

const Navbar = ({ toggle, isOpen }) => {
  const data = localStorage.getItem("theme");

  return (
    <div className="bg-gray-300 shadow-md relative z-30 dark:bg-gray-800 transition duration-300 ease-in-out">
      <div className="mx-auto p-4 max-w-7xl">
        <nav>
          <div className="flex justify-between items-center">
            <Link to="/" className="mojLogo">
              <SvgLogo />
            </Link>
            <div className="flex items-center">
              <NavLinks />
              <div className="cursor-pointer md:hidden" onClick={toggle}>
                <Hamburger
                  toggled={isOpen}
                  color={data === "light" ? "#ff0" : "#dc0000"}
                />
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>
  );
};

export default Navbar;

Here you have a piece of code that works when the first color page is read is set based on the values in local Storage that are dark or light. I'm interested in how to change colors when changing values in local Storage without refreshing the page.

Does this answer your question? [How to instantly update state when any changes into the localStorage in React.js](https://stackoverflow.com/questions/62896954/how-to-instantly-update-state-when-any-changes-into-the-localstorage-in-react-js) — futur, Aug 11 '21 at 16:00

score 0 · Answer 1 · answered Aug 11 '21 at 16:00

0

First thing that comes to mind is useLocalStorage React hook (https://usehooks.com/useLocalStorage/).

I think it will get the job done for you.

answered Aug 11 '21 at 16:00

TDiblik

522
4
18

how do I change colors based on changing value in local storage in react

1 Answers1