如何实现HTML按钮点击在明暗主题间双向切换？（JavaScript）

核心思路 #

要实现来回切换，关键是跟踪当前主题状态，每次点击按钮时判断当前是浅色还是深色，然后切换对应的样式和按钮文本。下面提供两种适合初学者的实现方式：

方式一：直接通过JS切换行内样式（延续你现有代码的写法） #

1. 修改按钮的点击事件函数名（更贴合功能）：

<button id="button6" type="button" class="btns" onclick="toggleTheme()">Light Mode</button>

2. 替换原有JS代码为以下内容（注意补充深色主题的样式值，比如你页面默认的深色背景、文字颜色等）：

// 初始状态设为false，表示默认是深色主题
let isLightTheme = false;

function toggleTheme() {
  // 切换主题状态：true变false，false变true
  isLightTheme = !isLightTheme;

  if (isLightTheme) {
    // 应用浅色主题样式（和你原来的LightTheme逻辑一致）
    document.body.style.backgroundColor = "#DBE6FD";
    document.getElementById('button_circle').style.color = "white";
    document.getElementById('button1').style.color = "#47597E";
    document.getElementById('button2').style.color = "#47597E";
    document.getElementById('button3').style.color = "#47597E";
    document.getElementById('text_p').style.backgroundColor = "#A2DBFA";
    document.getElementById('button6').innerHTML = "Dark Mode";
  } else {
    // 应用深色主题样式，请替换成你页面默认的深色样式值
    document.body.style.backgroundColor = "#1A1A2E"; // 示例深色背景
    document.getElementById('button_circle').style.color = "#F1F1F1"; // 示例文字颜色
    document.getElementById('button1').style.color = "#F1F1F1";
    document.getElementById('button2').style.color = "#F1F1F1";
    document.getElementById('button3').style.color = "#F1F1F1";
    document.getElementById('text_p').style.backgroundColor = "#16213E"; // 示例深色背景
    document.getElementById('button6').innerHTML = "Light Mode";
  }
}

方式二：用CSS类管理主题（更简洁易维护，推荐学习） #

这种方式把样式逻辑放到CSS里，JS只负责切换类，更符合前端开发的分离原则。

1. 先在CSS中定义明暗主题的样式：

/* 浅色主题样式 */
.light-theme {
  background-color: #DBE6FD;
}
.light-theme #button_circle {
  color: white;
}
.light-theme #button1,
.light-theme #button2,
.light-theme #button3 {
  color: #47597E;
}
.light-theme #text_p {
  background-color: #A2DBFA;
}

/* 深色主题样式，请替换成你页面默认的深色样式 */
.dark-theme {
  background-color: #1A1A2E;
}
.dark-theme #button_circle {
  color: #F1F1F1;
}
.dark-theme #button1,
.dark-theme #button2,
.dark-theme #button3 {
  color: #F1F1F1;
}
.dark-theme #text_p {
  background-color: #16213E;
}

2. 修改按钮的点击事件：

<button id="button6" type="button" class="btns" onclick="toggleTheme()">Light Mode</button>

3. 编写JS切换逻辑：

let isLightTheme = false;

function toggleTheme() {
  isLightTheme = !isLightTheme;
  const body = document.body;
  const themeBtn = document.getElementById('button6');

  if (isLightTheme) {
    // 切换到浅色主题：添加浅色类，移除深色类
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
    themeBtn.textContent = "Dark Mode";
  } else {
    // 切换到深色主题：添加深色类，移除浅色类
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
    themeBtn.textContent = "Light Mode";
  }
}

注意事项 #

• 如果你页面默认是浅色主题，记得把初始的isLightTheme设为true，并给<body>标签加上class="light-theme"。
• 深色主题的样式值需要根据你页面的实际默认样式来调整，示例值仅供参考。

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