我正在尝试创建一个“暗黑模式”切换器,这个功能效果很不错。但是,我想要初始状态使用用户的暗/亮偏好。
问题在于,在加载时,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;