javascript - Material-UI Darkmode Toggle with User Preference Fallback

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;

Answer 1

你可以添加一个 useEffect 调用，使用 首选暗模式 作为依赖项，一旦此值更改，将调用回调
像这样的东西，

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

代码和框链接: https://sj29m.csb.app/