网站深色模式切换正常，但刷新后自动变回浅色模式求助

你的深色模式刷新后闪烁问题，核心有两个原因：

1. 错误的window.onload赋值方式 #

你写的window.onload = setTheme();是立即执行setTheme函数，然后把函数的返回值（undefined）赋值给window.onload。这导致页面加载完成后不会触发主题设置，反而可能因脚本执行时机问题，出现主题切换延迟。

2. 未处理初始currentTheme为null的情况 #

首次访问网站时，localStorage.getItem("theme")返回null，此时currentTheme为null，调用setTheme会给<html>标签设置data-theme="null"，而你的CSS没有对应该值的样式，浏览器会回退到未定义变量的默认状态（即浅色）。

另外，要彻底避免闪烁，需尽早执行主题设置代码，不要等到window.onload（该事件触发时页面已开始渲染）。

修改后的代码 #

JavaScript 代码 #

// 处理初始值，默认设为light，也可根据系统偏好调整
let currentTheme = JSON.parse(localStorage.getItem("theme")) || "light";

function setTheme() {
  document.documentElement.setAttribute('data-theme', currentTheme);
}

function changeTheme() {
  currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
  localStorage.setItem("theme", JSON.stringify(currentTheme));
  setTheme();
}

// 立即执行主题设置，避免页面渲染后再切换导致的闪烁
setTheme();

可选优化：跟随系统主题偏好 #

如果想让网站默认匹配用户的系统主题，可将初始值改为：

const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
let currentTheme = JSON.parse(localStorage.getItem("theme")) || (systemPrefersDark ? "dark" : "light");

可选CSS优化：添加默认主题变量 #

为避免data-theme属性不存在时的样式异常，给:root添加默认变量（默认浅色）：

:root {
  --text: #09110f;
  --background: #f4fbf9;
  --primary: #44c1a1;
  --secondary: #85e0c9;
  --accent: #58dfbd;
}

:root[data-theme="dark"] {
  --text: #eef6f4;
  --background: #040b09;
  --primary: #3ebb9c;
  --secondary: #1f7a63;
  --accent: #20a785;
}

修复逻辑说明 #

1. 立即执行setTheme()，在页面开始渲染前就设置好data-theme属性，从根源避免闪烁。
2. 给currentTheme设置默认值，解决首次访问或localStorage值异常时的样式回退问题。
3. 移除了错误的window.onload赋值，不再依赖晚触发的页面加载事件。

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