本地存储中的暗模式存储与 Material-UI 反应答案

【问题标题】：Darkmode Store in local storage React with Material-UI本地存储中的暗模式存储与 Material-UI 反应
【发布时间】：2020-07-26 07:16:05
【问题描述】：

如何在localStorage中存储暗模式的值？

我还能这样吗？

你们能给我一些想法吗？

谢谢你的欢呼，

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>
  );
}

【问题讨论】：

localStorage.setItem 和 getItem 对您不起作用？从您的问题来看，您似乎想像 setDarkState 一样更新本地存储...您面临的问题是什么
好吧，我试过了，但它不会保留darkState的状态，它在切换时存储真或假，但我知道我要存储什么。
在您的条件下，您没有将 darkState 与任何东西进行比较......这就是他们没有切换的原因
对不起，如果我没有说清楚，但基本上切换工作，它切换到暗到亮，我的问题是我必须在本地存储中存储什么，以便首选（暗或亮mode ) 被记住

标签： javascript reactjs material-ui frontend themes

【解决方案1】：

这样做：

在 useEffect 中我们查看 localStorage 中是否有东西并使用它
当我们切换时，我们也会更新 localStorage

相关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");
    }
  };

工作stackblitz

【讨论】：

【解决方案2】：

以下是如何设置和读取 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>
  );
}

【讨论】：

【解决方案3】：

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>
);

【讨论】：

嘿，请解释一下您的代码实际上是如何解决问题的，以便提出问题的人可以从您的解决方案中学习。