用户偏好回退的 Material-UI 暗黑模式切换

Question

我正在尝试创建一个“暗黑模式”切换器，这个功能效果很不错。但是，我想要初始状态使用用户的暗/亮偏好。

问题在于，在加载时，prefersDarkMode似乎被设置为false。如果你喜欢深色模式，它会在页面完全加载后更改为true，但是此时darkState已经被设置为false。

有更好的方法来处理这个问题吗？实际上，我正在寻找与https://material-ui.com/网站相同的行为（用户偏好作为默认状态，并能够切换浅色/深色模式）。

示例：https://codesandbox.io/s/dark-mode-demo-with-user-preference-fallbck-ltk09?file=/demo.js:220-807

function App() {
  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
  const [darkMode, setDarkMode] = React.useState(prefersDarkMode);
  console.log(prefersDarkMode);

  const theme = React.useMemo(() =>
    createMuiTheme({
      palette: {
        type: darkMode ? "dark" : "light"
      }
    })
  );

  const handleDarkModeToggle = () => {
    setDarkMode(!darkMode);
  };

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <button onClick={handleDarkModeToggle}>Toggle Dark Mode</button>
    </ThemeProvider>
  );
}

export default App;

- JeremyE

Answer 1

您可以添加一个 useEffect 调用，将 prefersDarkMode 作为依赖项，一旦这个值改变，回调函数就会被调用。就像这样：

useEffect(() => {
    setDarkMode(prefersDarkMode);
}, [prefersDarkMode]);

CodeSandbox链接: https://sj29m.csb.app/

- Avinash