使用localStorage管理站点颜色主题，如何设置默认加载主题？

原有初始化逻辑仅在localStorage存储的theme值恰好为theme-dark-blue时才会执行设置操作，未覆盖「无存储值」「存储值为其他合法主题」的场景，所以首次加载无存储值时不会触发主题设置。

以下是修改后的完整可运行代码：

// 用于设置指定主题/配色方案的函数
function setTheme(themeName) {
  localStorage.setItem('theme', themeName);
  document.documentElement.className = themeName;
}

// 页面初始加载时立即执行的主题设置函数
(function () {
  // 定义所有合法的主题列表，后续新增主题直接在此处添加即可
  const validThemes = ['theme-dark-blue', 'theme-light-blue', 'theme-dark-green'];
  // 读取本地存储的用户主题偏好
  const savedTheme = localStorage.getItem('theme');
  // 优先使用用户已存储的合法主题，无有效值时默认加载theme-dark-blue
  const targetTheme = validThemes.includes(savedTheme) ? savedTheme : 'theme-dark-blue';
  setTheme(targetTheme);
})();

如果你需要实现提到的「判断标签是否有class再设置」的兼容逻辑，可以使用下面的初始化版本：

(function () {
  const validThemes = ['theme-dark-blue', 'theme-light-blue', 'theme-dark-green'];
  const savedTheme = localStorage.getItem('theme');
  const currentHtmlClass = document.documentElement.className.trim();
  let targetTheme;
  // 优先级1：本地存储的合法主题
  if (validThemes.includes(savedTheme)) {
    targetTheme = savedTheme;
  // 优先级2：html标签已设置的合法主题类名
  } else if (validThemes.includes(currentHtmlClass)) {
    targetTheme = currentHtmlClass;
  // 兜底：默认深色蓝主题
  } else {
    targetTheme = 'theme-dark-blue';
  }
  setTheme(targetTheme);
})();

注意事项：建议将这段初始化代码放在<head>标签内加载，不要放在DOM末尾引入，避免首次加载出现样式闪烁（FOUC）问题。

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