Javascript 丹·阿布拉莫夫'；s的主题转换逻辑

你能解释一下这个

窗口的工作原理吗？
我试图实现丹·阿布拉莫夫在盖茨比应用程序中设置暗模式的方法，但我不知道上面的功能是如何工作的。
首先，它是在
setTheme（）
中定义和调用的，并使用
newTheme
作为参数

(function () {
  window.__onThemeChange = function () { };
  function setTheme (newTheme) {
    window.__theme = newTheme;
    preferredTheme = newTheme;
    document.body.className = newTheme;
    window.__onThemeChange(newTheme);
  }
  var preferredTheme;
  try {
    preferredTheme = localStorage.getItem('theme');
  } catch (err) { }
  window.__setPreferredTheme = function (newTheme) {
    setTheme(newTheme);
    try {
      localStorage.setItem('theme', newTheme);
    } catch (err) { }
  }
  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkQuery.addListener(function (e) {
    window.__setPreferredTheme(e.matches ? 'dark' : 'light')
  });
  setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
})();

然后在组件中使用此功能来设置状态：

    class Layout extends React.Component {
      state = {
        theme: null,
      };
      componentDidMount() {
        this.setState({ theme: window.__theme });
        window.__onThemeChange = () => {
          this.setState({ theme: window.__theme });
        };
      }

这是一个
窗口。\uuu on themechange
函数刚刚定义，然后使用
newTheme
的一个参数在没有正文的情况下调用，然后在组件中重新定义，作为更改状态的一种方式。
链接到Dan的回购协议：

在其中定义的文件：

组成部分：
它看起来像是遗留代码，可能会解决某些在盖茨比中不会遇到的问题。为什么不在文档正文上切换CSS类呢？
它看起来像是遗留代码，可能会解决某些您在盖茨比中不会遇到的问题。为什么不在文档主体上切换CSS类呢？
我设法弄明白了。在html.js（一个全局文件）中定义了
窗口。\uuuu ontemechange
，但没有其主体，然后在布局组件中定义了该主体（以连接该组件的状态），然后从html.js再次调用。Dan找到它的方法是惊人的。
我设法找到了它。
窗口。\uu onThemeChange
是在html.js（一个全局文件）中定义的，没有它的主体，然后这个主体被定义在布局组件中（连接到这个组件的状态），然后从html.js再次调用。Dan解决问题的方法是惊人的。
您可以通过一个简单的导入来使用whitin gatsby，如图所示

这项工作的有利条件可能是

我将使用的一种方法是，根据useContext提供的“全局”状态以友好方式设置CSS类，并将切换模式按钮绑定到此上下文
 如图所示，您几乎可以通过一个简单的导入来使用whitin gatsby

这项工作的有利条件可能是

我将使用的一种方法是，根据useContext提供的“全局”状态以友好方式设置CSS类，并将切换模式按钮绑定到此上下文
 我很确定他只是在使用一个盖茨比博客初学者，所以这不是“丹·阿布拉莫夫的博客”——具体来说，这个黑暗模式插件使用的是丹的实现。所以这是他自己写的东西。我很确定他只是在使用一个
gatsby博客初学者
-&-所以这不是“丹·阿布拉莫夫的博客”-确切地说，这个黑暗模式插件使用的是丹的实现。所以这是他自己写的东西。使用
var
和无箭头函数scss类的样式不够。我想有一个锚到操作系统的主题偏好。使用
var
和无箭头函数scss类的样式不够。我想有一个锚到操作系统的主题偏好。