反应暗模式处理程序答案

【问题标题】：React Dark Mode Handler反应暗模式处理程序
【发布时间】：2020-04-09 14:16:09
【问题描述】：

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

【问题讨论】：

require 在 if 条件下，你没有收到警告什么的吗？
没有错误。控制台中唯一弹出的是当我记录 isDarkMode 的值时。每次我更改系统设置时都会触发该日志，但加载的样式表似乎只更改一次。

标签： css reactjs matchmedia

【解决方案1】：

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

【讨论】：