网站浅色模式刷新出现FOUC问题，求解决方案

问题根源在于你原来的模式检测代码是在jQuery的$(function())中执行的，这个事件要等到DOM完全加载后才会触发。此时浏览器已经用默认的深色样式渲染了页面，之后再切换为浅色样式就会出现闪现。

解决方案：在页面渲染前设置模式类 #

把模式检测逻辑提前到<head>中，在CSS加载完成后、页面开始渲染前执行，确保浏览器一开始就使用正确的样式变量渲染页面。

修改后的完整代码如下：

<html>
<head>
  <style>
    :root,
    :root.dark {
      --color-bg: #2B2531;
      --color-fg: #FAE5C4;
    }

    :root.light {
      --color-bg: #DED8F0;
      --color-fg: #2F2131;
    }

    body {
      background-color: var(--color-bg);
      color: var(--color-fg);
    }
  </style>
  <!-- 页面渲染前执行模式检测 -->
  <script>
    const savedMode = localStorage.getItem('mode');
    const htmlEl = document.documentElement;
    
    // 直接设置对应模式的类，默认深色
    if (savedMode === 'light') {
      htmlEl.classList.add('light');
      htmlEl.classList.remove('dark');
    } else {
      htmlEl.classList.add('dark');
      htmlEl.classList.remove('light');
    }
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function() {
      const switched = $('#mode');
      
      // 根据存储的状态初始化checkbox
      switched.prop("checked", savedMode === 'light');

      switched.on("change", function() {
        if (switched.is(':checked')) {
          $('html').removeClass('dark').addClass('light');
          localStorage.setItem('mode', 'light');
        } else {
          $('html').removeClass('light').addClass('dark');
          localStorage.setItem('mode', 'dark');
        }
      });
    });
  </script>
</head>

<body>
  <div class="boutonmode">
    <div class="darklightmode">
      <input type="checkbox" id="mode">
      <label for="mode" class="form-check-label">Mode</label>
    </div>
  </div>
  <h1>test</h1>
</body>
</html>

关键修改说明 #

1. 提前执行模式检测：用原生JS在<head>中直接读取localStorage，并给<html>元素设置对应的类。这一步在浏览器开始渲染页面内容前完成，避免了默认样式的闪现。
2. 简化初始化逻辑：jQuery就绪函数中只需要初始化checkbox的状态，不需要重复设置<html>的类（已经提前完成）。
3. 确保CSS优先加载：把CSS放在<head>最前面，保证样式在模式类设置后能立即生效。

内容的提问来源于stack exchange，提问作者amy