我的应用程序组件中有以下代码。
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 的更新？
你可能不需要这里的处理程序 -我假设你总是想使用Bootswatch的两个Bootstrap变体之一 - 所以你可以将以下代码添加到html的<head>部分：
<!-- 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 的浏览器，您可能不需要这些。