HTML/CSS双页项目明暗模式切换失效、跨页不保存及按钮报错求助

问题根因 #

1. HTML标签语法错误：页面2的邮箱展示区域的<a>、<strong>标签均未正确闭合，导致页脚所有元素被异常包裹进该<a>标签内，点击明暗模式切换按钮时会触发该<a>标签的跳转逻辑。同时该链接href属性未加mailto:前缀，浏览器会将邮箱地址识别为本地文件名，找不到对应文件就会抛出"your file couldn't be accessed"错误。
2. 按钮嵌套不规范：两个页面的Contact按钮都采用了<button>内部嵌套<a>的写法，不符合HTML规范，易触发异常跳转。
3. 无状态持久化逻辑：当前明暗模式状态仅保存在当前页面的DOM类名中，没有做本地存储，页面跳转或刷新后状态会重置为默认值。

修复方案 #

修正页面2的邮箱区域代码 #

将原错误代码：

<div class="div2">
  <p><strong>vaske@gmail.com<a href="vaske@gmail.com"><strong></p>
</div>

修改为：

<div class="div2">
  <p><a href="mailto:vaske@gmail.com"><strong>vaske@gmail.com</strong></a></p>
</div>

修正Contact按钮写法 #

删除按钮内嵌套的<a>标签，改用点击事件实现跳转：

• 首页（index.html）的Contact按钮：

<button class="button" onclick="location.href='emailpage.html'">Contact me</button>

• 联系页（emailpage.html）无需保留指向当前页的Contact按钮，可改为跳回首页，或者直接删除。

升级明暗模式逻辑支持跨页状态同步 #

将两个页面中原有darkmode相关的JS代码统一替换为以下内容，实现状态本地持久化：

// 页面加载时自动读取并应用已保存的模式
document.addEventListener('DOMContentLoaded', () => {
  const isLightMode = localStorage.getItem('lightMode') === 'true';
  if (isLightMode) {
    document.body.classList.add('dark-mode');
  }
});

function darkmode() {
  const body = document.body;
  body.classList.toggle('dark-mode');
  // 将当前模式状态存入本地存储
  localStorage.setItem('lightMode', body.classList.contains('dark-mode'));
}

现有CSS代码无需修改，完成以上调整后两个问题都会解决。

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