无法修复 React 暗模式闪烁

Posted 2023-03-06

技术标签:

【中文标题】无法修复 React 暗模式闪烁【英文标题】：Can't Fix React Dark Mode Flashing 【发布时间】：2021-06-26 17:55:51 【问题描述】：

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

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

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

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

这是GitHub repository 的链接。 注意：我没有使用任何服务器端渲染。

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

以上是关于无法修复 React 暗模式闪烁的主要内容，如果未能解决你的问题，请参考以下文章