点击按钮同步切换背景图与背景颜色的实现求助

要实现点击按钮切换背景图和背景色，你需要在CSS中定义对应主题的样式，并修正JavaScript逻辑来正确切换和保存主题状态：

1. 修正CSS样式 #

为light-theme和dark-theme类分别设置不同的背景图和背景色：

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /* 默认主题设为浅色 */
  background-image: url("https://sun9-66.userapi.com/impg/U_B0e4HYLxsYNJIxFpYW6jR12JhDy76x2zhkXw/O4OafXIrfLc.jpg?size=2560x1920&quality=95&sign=c9143650a2af6853e49e25e18475c8f4&type=album");
  background-color: #f0f0f0;
}

/* 浅色主题 */
body.light-theme {
  background-image: url("https://sun9-66.userapi.com/impg/U_B0e4HYLxsYNJIxFpYW6jR12JhDy76x2zhkXw/O4OafXIrfLc.jpg?size=2560x1920&quality=95&sign=c9143650a2af6853e49e25e18475c8f4&type=album");
  background-color: #f0f0f0;
}

/* 深色主题 */
body.dark-theme {
  background-image: url("这里替换成你的深色背景图URL");
  background-color: #1a1a1a;
  /* 可选：添加背景叠加暗化效果 */
  background-blend-mode: multiply;
}

2. 修正JavaScript逻辑 #

修改事件监听代码，正确切换主题类，并将选中的主题保存到localStorage，同时添加页面加载时恢复主题的逻辑：

// 页面加载时恢复保存的主题
document.addEventListener('DOMContentLoaded', function() {
  const savedTheme = localStorage.getItem('theme') || 'light-theme';
  document.body.className = savedTheme;
});

// 切换按钮事件监听
document.getElementById('hide-checkbox').addEventListener('click', function() {
  const currentTheme = document.body.className;
  const newTheme = currentTheme === 'light-theme' ? 'dark-theme' : 'light-theme';
  
  document.body.className = newTheme;
  localStorage.setItem('theme', newTheme);
});

关键修复点 #

• 移除原代码中无效的localStorage.setItem('theme', 'css/Style.css')，改为保存主题类名
• 在CSS中明确定义两个主题的背景图和背景色样式
• 添加页面加载时从localStorage恢复主题的逻辑，实现状态持久化
• 简化主题切换判断逻辑，让代码更清晰

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