Javascript 本地存储中的暗模式存储与材质UI反应

如何在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>
  );
}

函数应用程序（）{
const[darkState，setDarkState]=useState（“”）；
const palletType=darkState？“暗”：“亮”；
常量mainPrimaryColor=darkState？蓝色[400]：蓝色[800]；
常量mainSecondaryColor=darkState？灰色[800]：灰色[100]；
常量暗色调=创建明暗色调({
调色板：{
类型：palletType，
主要：{
主：主原色，
},
中学：{
主：主辅色，
},
},
});
函数handleThemeChange（）{
设置暗状态（！暗状态）；
}
返回(
);
}

要执行此操作：

• 在useffect中，我们查看本地存储中是否有内容并使用它
• 切换时，我们也会保持本地存储的更新

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

---

工作

以下是如何设置和读取本地存储的示例：

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

import React，{useState，useffect}来自“React”；
导出默认函数App（）{
const[theme，setTheme]=useState（“光”）；
useffect（（）=>{
setTheme（localStorage.getItem（“theme”）；
}, []);
const handleClick=主题=>{
setItem（“theme”，theme）；
主题；
};
返回(
所选主题：{theme}
handleClick（“灯光”）}>灯光
handleClick（“深色”）}>深色
);
}

const[darkTheme，setDarkTheme]=useState（true）；
const theme=createMuiTheme({
调色板：{
类型：暗色？“暗色”：“浅色”
}
})
useffect（（）=>{
const themeType=localStorage.getItem（“暗”）| |“暗”；
如果（主题类型！=“深色”）{
塞达克切姆（假）；
}
}, []);
constchangetheme=（）=>{
setItem（“深色”，暗色？“浅色”：“深色”）；
暗色调（！暗色调）；
};
返回(
所选主题：“{theme}”

切换主题
);

localStorage.setItem和getItem不适合您吗？从您的问题来看，您似乎希望像设置DarkState一样更新本地存储。。。你面临的问题是什么？好吧，我试过了，但它不会保留暗状态的状态，切换时它会存储true或false，但idk我应该存储什么。在你的情况下，你不会将

暗状态

与任何东西进行比较。。。这就是为什么他们没有切换的原因如果我没有说清楚，但基本上切换是有效的，它切换到黑暗到光明，我的问题是我必须在本地存储中存储什么，以便记住首选（黑暗或光明模式）嘿，请解释您的代码在解决问题时实际做了什么，以便提出问题的人可以从您的解决方案中学习。

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