我正在尝试在带有MUI的Next.js应用程序中使用暗模式。问题是，一旦设置了暗模式，我似乎无法使其持久。我在createContext的帮助下设置状态，因为切换按钮位于组件内部。
当切换时，它将状态设置为true或false，并在localStorage中设置。但是，在页面刷新时，它将返回false状态。
我试过很多解决办法，但似乎都不能奏效。
目前我正在_app.js * 中执行以下操作（这只是一个片段，完整代码在链接中）*：
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
const mode = localStorage.getItem("mode");
// set mode
setDarkMode(mode);
}, []);
useEffect(() => {
localStorage.setItem("mode", darkMode);
}, [darkMode]);
// Set dark mode based on media query
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
useEffect(() => {
setDarkMode(prefersDarkMode);
}, [prefersDarkMode]);
<ColorModeContext.Provider value={{ darkMode, setDarkMode }}>
<ThemeProvider theme={darkMode ? darkTheme : theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</ColorModeContext.Provider>我已经设置了一个CodeSandbox，其中包含完整代码：
https://codesandbox.io/s/next-js-mui-dark-mode-n6l24?file=/pages/_app.js
任何帮助都将不胜感激！
3条答案
按热度按时间lztngnrs1#
代码
setDarkMode(prefersDarkMode)中的第三个效果将在所有情况下覆盖darkMode，使本地存储中的任何值无效。此外，最好定义一个自定义
setDarkMode函数并将其传递给ColorModeContext提供程序。https://codesandbox.io/s/next-js-mui-dark-mode-forked-ucpvo?file=/pages/_app.js
tvmytwxo2#
正如我提到的，
darkMode不应该只是false，首先尝试从本地存储中获取darkMode，然后将其用作默认值。这是我的一个回购协议https://github.com/hotcakedev628/mail-app-demo/blob/master/src/contexts/SettingsContext.js
oaxa6hgo3#
有一个错误与您的csb，没有正确加载。如果你想坚持黑暗模式，没有 Flink 的问题，在多用户界面。必须使用下一个主题，易于设置，我没有按照这个方法https://github.com/DiMatteoL/buzzrank-tutorial和实时预览https://buzzrank-tutorial.vercel.app/。