Astro中View Transition暗黑模式路由切换失效问题求助

问题根源 #

1. 原 switchTheme 函数依赖复选框的 change 事件对象，当 astro:after-swap 触发时，事件目标为文档而非复选框，导致 e.target.checked 逻辑错误，错误重置主题
2. 路由切换后DOM被替换，原复选框的事件监听失效，新渲染的复选框未同步 localStorage 中的主题状态

修正后的代码 #

JavaScript 代码

// 从 localStorage 同步主题到文档和复选框
function syncTheme() {
  const themeToggle = document.querySelector('.theme-switch input[type="checkbox"]');
  if (!themeToggle) return;

  const currentTheme = localStorage.getItem("theme") || "default";
  
  // 更新文档主题属性
  document.documentElement.setAttribute("data-theme", currentTheme);
  // 同步复选框勾选状态
  themeToggle.checked = currentTheme === "dark";
}

// 根据复选框状态切换主题
function switchTheme() {
  const themeToggle = document.querySelector('.theme-switch input[type="checkbox"]');
  if (!themeToggle) return;

  const isDark = themeToggle.checked;
  const newTheme = isDark ? "dark" : "default";

  document.documentElement.setAttribute("data-theme", newTheme);
  localStorage.setItem("theme", newTheme);
}

// 页面初始化时同步主题
syncTheme();

// 使用事件委托监听复选框切换，兼容路由切换后的新DOM元素
document.addEventListener("change", (e) => {
  if (e.target.matches('.theme-switch input[type="checkbox"]')) {
    switchTheme();
  }
});

// 路由切换完成后重新同步主题
document.addEventListener("astro:after-swap", syncTheme);

CSS 和 HTML 代码无需修改

原有的CSS样式和HTML结构保持不变即可。

关键改进点 #

• 拆分函数职责：将主题同步和主题切换逻辑分离，避免事件依赖问题
• 事件委托：通过文档级别的事件监听捕获复选框变化，确保路由切换后新元素仍能触发逻辑
• 强制同步机制：路由切换完成后主动从 localStorage 同步主题状态，保证页面主题、复选框状态、本地存储三者完全一致

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