如何解决页面加载时浅色模式闪深色背景的问题

阿华AIGC实验室

2026-5-8

解决深色/浅色模式切换时的页面闪烁问题

问题根源

你碰到的这个闪烁问题，本质是渲染时机的问题：当前的代码要等jQuery加载完成、DOM就绪后，才去读取localStorage并修改body的类。但浏览器在这之前已经按照默认的深色样式渲染了页面，所以会出现短暂的深色闪屏，再切换到浅色模式的尴尬情况。

核心解决方案：提前在页面渲染前设置模式

要彻底解决闪烁，我们得把模式判断的逻辑移到<head>标签里，用原生JavaScript实现——不需要等jQuery加载，在浏览器开始渲染页面内容之前就把正确的模式类加上。这样页面从一开始就会以正确的模式渲染，完全不会有闪烁。

步骤1：在`<head>`中添加前置判断代码

把这段代码放在你的<head>里，样式表之后、页面内容之前：

<script>
  // 读取本地存储的模式，默认设为深色（对应blackout类）
  const currentMode = localStorage.getItem('blackout') ?? '1';
  // 确保本地存储有值，避免后续判断出错
  localStorage.setItem('blackout', currentMode);
  // 给html标签设置模式类（也可以用body，html范围更广更方便）
  document.documentElement.classList.toggle('blackout', currentMode === '1');
</script>

步骤2：简化原有的jQuery切换逻辑

原来的初始化代码可以删掉了（因为<head>里已经处理了初始模式），只保留点击切换的逻辑就行，还能简化一下：

$(function() {
  $('#boToggle').on('click', function(){
    // 切换模式状态
    const isDark = localStorage.getItem('blackout') === '1';
    const newMode = isDark ? '0' : '1';
    
    // 更新本地存储和页面类
    localStorage.setItem('blackout', newMode);
    $('body').toggleClass('blackout', !isDark);
  });
});

额外优化小技巧

把模式类挂在<html>标签上比<body>更灵活，后续写CSS的时候可以用:root或者html.blackout来全局控制样式，比如：

html {
  --bg-color: #fff;
  --text-color: #333;
}
html.blackout {
  --bg-color: #1a1a1a;
  --text-color: #eee;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}