无法修复 React 黑暗模式闪烁

Question

在我的 React 应用程序中实现暗模式时，我遇到了一个令人沮丧的问题。应用程序从 localStorage 读取并应用用户喜欢的主题（这一切都由 use-dark-mode 完成）。不幸的是，每次用户打开页面时，默认主题都会在启用深色模式之前闪烁。

现在，我浏览了互联网并发现，只需在 <body> 之后的 <script> 标记中放置特定代码（如 here 所示）即可解决问题.

问题是，似乎没有什么可以解决这个令人不快的闪现问题，而且它在所有浏览器中都会出现。我试过将脚本移动到 <head> 标签内，甚至运行和 window.onload，但似乎没有任何效果。

有人遇到过这样的问题吗？修复此闪光灯的最佳方法是什么？非常感谢！

这里是 link 到 GitHub repository。 注意：我没有使用任何服务器端渲染。

Answer 1

事实证明，修复非常简单。在您的 index.html 中，在 <head> 标签内添加一些样式。

<style type="text/css">
  body.light-mode {
    background-color: #F9FAFC;
  }

  body.dark-mode {
    background-color: #1A1A1A;
  }
</style>

Can't Fix React Dark Mode Flashing