Question

我的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更新？

Answer 1

您在这里可能不需要处理程序-我假设您将始终要使用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的浏览器，因此您可能不需要这些。

反应暗模式处理程序

1 个答案: