解决网页主题切换后刷新深色主题闪烁问题（HTML/CSS/JS）

问题根源 #

1. HTML中<body>默认添加了dark-mode类，刷新时JS读取localStorage的主题后直接调用classList.add()，导致两个主题类（如dark-mode和light-mode）同时存在。
2. 脚本使用defer属性，会在DOM解析完成后才执行，页面会先渲染默认的深色主题，之后才应用缓存的浅色主题，造成视觉闪烁。

修复步骤 #

1. 移除HTML中body的默认主题类 #

将<body>标签的默认class="dark-mode"删除，避免初始类与缓存类冲突：

<body id='mybody'>
  <!-- 原有内容不变 -->
</body>

2. 提前执行主题初始化代码（消除闪烁） #

在<head>中添加内联脚本，在页面渲染前读取缓存主题并设置，彻底避免闪烁：

<head>
  ...
  <!-- 先执行主题初始化，必须放在CSS加载前或同时 -->
  <script>
    // 优先获取缓存主题，默认使用dark-mode
    const savedTheme = localStorage.getItem('theme') || 'dark-mode';
    // 给html元素添加主题类（此时body还未渲染，操作html更可靠）
    document.documentElement.classList.add(savedTheme);
  </script>
  <link rel="stylesheet" href="/styles/style.css">
  <!-- 按钮事件脚本仍用defer，不影响DOM加载 -->
  <script defer src="/scripts/app.js"></script>
  ...
</head>

3. 优化JS按钮事件逻辑（增强鲁棒性） #

保留原有按钮事件，可额外添加清除所有主题类的逻辑，确保每次切换只有一个主题类生效：

const darkButton = document.getElementById('dark-mode');
const lightButton = document.getElementById('light-mode');
const body = document.body;

darkButton.onclick = () => {
    body.classList.remove('light-mode');
    body.classList.add('dark-mode');
    localStorage.setItem('theme', 'dark-mode');
};

lightButton.onclick = () => {
    body.classList.remove('dark-mode');
    body.classList.add('light-mode');
    localStorage.setItem('theme', 'light-mode');
};

注：也可继续使用classList.replace()，它会自动处理类的替换，逻辑更简洁。

关键说明 #

• 内联初始化脚本必须放在CSS加载前或同时执行，确保主题样式在页面渲染时立即生效。
• 操作document.documentElement（即<html>标签）而非<body>，是因为在<head>中执行脚本时，<body>尚未被解析，无法获取。CSS中的主题选择器无需修改，因为样式会从html继承到body。

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