Darkmode Store in local storage React with Material-UI

user_13060510 0
Viewed 2296

How to store the value of the dark mode in localStorage?

can I even do it in this way?

can you guys give me ideas on how?

thank you cheers,

function App() {

  const [darkState, setDarkState] = useState("");
  const palletType = darkState ? "dark" : "light";
  const mainPrimaryColor = darkState ? blue[400] : blue[800];
  const mainSecondaryColor = darkState ? grey[800] : grey[100];

  const darkTheme = createMuiTheme({
    palette: {
      type: palletType,
      primary: {
        main: mainPrimaryColor,
      },
      secondary: {
        main: mainSecondaryColor,
      },
    },
  });
 function handleThemeChange() {
    setDarkState(!darkState);
  }
 return (
    <ThemeProvider theme={darkTheme}>
       <IconButton onClick={handleThemeChange()}>
            <Switch checked={darkState} />
        </IconButton>
    </ThemeProvider>
  );
}
material-ui reactjs frontend themes javascript
3 Answers

to do this:

  • in useEffect we see if there is something in localStorage and use it
  • when we toggle, we keep localStorage updated also

relevant JS:

  useEffect(() => {
    const existingPreference = localStorage.getItem("darkState");
    if (existingPreference) {
     ( existingPreference === "light")
        ? setDarkState("light")
        : setDarkState("dark");
    } else {
      setDarkState("light");
      localStorage.setItem("darkState", "light");
    }
  }, []);

const handleThemeChange = () => {
    setSwitchState(switchState === true ? false : true);
    if (darkState === "light") {
      setDarkState("dark");
      setMainPrimaryColor(grey[400]);
      setMainSecondaryColor(blue[400]);
      localStorage.setItem("darkState", "dark");
    } else {
      setDarkState("light");
      setMainSecondaryColor(grey[400]);
      setMainPrimaryColor(blue[400]);
      localStorage.setItem("darkState", "light");
    }
  };

working stackblitz

user_87578830

Here is example how you can set and read from LocalStorage:

import React, {useState, useEffect} from 'react';

export default function App() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    setTheme(localStorage.getItem("theme"));
  }, []);

  const handleClick = theme => {
    localStorage.setItem("theme", theme);
    setTheme(theme);
  };

  return (
    <div className="App">
      <h1>Selected theme: {theme}</h1>
      <button onClick={() => handleClick("light")}>Light</button>
      <button onClick={() => handleClick("dark")}>Dark</button>
    </div>
  );
}
user_13301050 
const [darkTheme, setDarkTheme] = useState(true);
const theme = createMuiTheme({
palette: {
  type: darkTheme ? "dark" : "light"
 }
})


useEffect(() => {
  const themeType = localStorage.getItem("dark") || "dark";
  if (themeType != "dark") {
    setDarkTheme(false);
  }
}, []);

const changeTheme = () => {
  localStorage.setItem("dark", darkTheme ? "light" : "dark");
  setDarkTheme(!darkTheme);
};

return (
    <div className="App">
        <p>Selected theme: " {theme} "</p>
        <button onClick={changeTheme}>toggle theme</button>
    </div>
);
user_106158040
Related