1

我的 App 组件中有以下代码。

const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
const [isDarkMode, setIsDarkMode] = React.useState(darkMode.matches);

const darkModeChangeHandler = (e) => {
    console.log('e.matches', e.matches);
    setIsDarkMode(e.matches);
};
darkMode.addListener(darkModeChangeHandler);

React.useEffect(() => {
    console.log('dark mode', isDarkMode);
    if (isDarkMode)
        require('bootswatch/dist/darkly/bootstrap.min.css');
    else
        require('bootswatch/dist/flatly/bootstrap.min.css');
        return () => {
        darkMode.removeListener(darkModeChangeHandler);
    };
}, [isDarkMode]);

当我从浅色模式开始，然后进入系统设置并打开深色模式时，会加载深色 css，但是当我关闭深色模式时 css 不会更新。当我以暗模式开始时，相反的事情也会发生。

您可以看到我正在记录 isDarkMode 的值，并且每次打开/关闭暗模式时都会更新。谁能解释为什么CSS只是第一次改变？有没有更好的方法来处理 css 的更新？

4

1 回答 1

0

您可能在这里不需要 Handler - 我假设您总是想使用 Bootswatch 的两个 Bootstrap 变体之一 - 所以您只需将以下代码添加到<head>您的 html 部分：

<!-- Bootstrap CSS -->
<!-- Inform modern browsers that this page supports both dark and light color schemes -->
<meta name="color-scheme" content="light dark">
<!-- Load the alternate CSS first ... -->
<link rel="stylesheet" href="bootswatch/dist/darkly/bootstrap.min.css" media="(prefers-color-scheme: dark)">
<!-- ... and then the primary CSS last -->
<link rel="stylesheet" href="bootswatch/dist/flatly/bootstrap.min.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">

看一下https://vinorodrigues.github.io/bootstrap-dark/readme.html#bootstrap-night以获得完整的文章......有一些关于后备等的信息，但是因为你使用的是浏览器支持 React 你可能不需要这些。

于 2020-08-15T21:59:38.180 回答