如何实现暗黑模式多元素切换、图标切换及跨页面状态保持？

1. 切换按钮图标（太阳↔月亮） #

给按钮内的图标添加ID，通过JS切换ion-icon的name属性实现图标切换，同时配合主题状态同步更新：

修改HTML按钮代码：

<button onclick="myFunction()"><ion-icon id="themeIcon" name="sunny"></ion-icon></button>

更新JS代码：

function myFunction() {
  const body = document.body;
  const themeIcon = document.getElementById('themeIcon');
  
  // 切换body的暗黑模式类
  body.classList.toggle('dark-mode');
  
  // 根据当前主题切换图标
  const isDark = body.classList.contains('dark-mode');
  themeIcon.name = isDark ? 'moon' : 'sunny';
  
  // 把主题状态存入本地存储
  localStorage.setItem('darkMode', isDark);
}

// 页面加载时初始化主题和图标
document.addEventListener('DOMContentLoaded', () => {
  const isDark = localStorage.getItem('darkMode') === 'true';
  const body = document.body;
  const themeIcon = document.getElementById('themeIcon');
  
  if (isDark) {
    body.classList.add('dark-mode');
    themeIcon.name = 'moon';
  } else {
    body.classList.remove('dark-mode');
    themeIcon.name = 'sunny';
  }
});

2. 跨页面保持暗黑模式状态 #

通过localStorage持久化存储主题状态，页面加载时读取并应用状态——上述JS代码已经包含这部分逻辑：

• 切换主题时，将状态存入localStorage
• 页面初始化时，读取localStorage中的状态，自动设置对应主题和图标

3. 让暗黑模式作用于更多元素 #

通过CSS后代选择器，给.dark-mode下的nav、p、h2等元素设置暗黑模式样式：

更新CSS代码：

.dark-mode {
  background-color: #181d4b;
  color: white;
}

/* 暗黑模式下导航栏样式 */
.dark-mode nav {
  background-color: rgba(20, 24, 54, 0.8);
}
.dark-mode nav ul li a,
.dark-mode nav ul li a:visited {
  color: white;
}

/* 暗黑模式下文本框样式 */
.dark-mode p,
.dark-mode h2 {
  background-color: rgba(30, 36, 75, 0.637);
  border-color: white;
  color: white;
}

/* 暗黑模式下logo样式 */
.dark-mode .logo {
  background-color: rgba(40, 48, 87, 0.637);
  border-color: white;
  color: white;
}

/* 暗黑模式下图片边框 */
.dark-mode img {
  border-color: white;
}

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