切换深色/浅色模式时如何修改按钮样式并同步按钮显示文本

• 给按钮添加唯一ID，方便JS获取元素修改内容和样式
• 新增按钮基础样式及深色模式下的按钮样式规则
• 完善JS切换逻辑，同时处理页面主题切换、按钮文字变更、按钮样式适配

完整修改后代码 #

<html>
<head>
<style>
.page {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
  min-height: calc(100vh - 50px);
  margin: 0;
}

.dark-mode {
  background-color: black;
  color: white;
}

/* 按钮基础样式 */
#themeToggle {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  background-color: #2c3e50;
  color: white;
  margin-top: 20px;
}

/* 深色模式下的按钮样式 */
.dark-mode #themeToggle {
  background-color: #ecf0f1;
  color: #2c3e50;
}
</style>
</head>
<body class="page">
Hello
<button id="themeToggle" onclick="myFunction()">深色模式</button>

<script>
function myFunction() {
   const pageElement = document.body;
   const toggleBtn = document.getElementById('themeToggle');
   // 切换主题类并获取当前是否为深色模式
   const isDarkMode = pageElement.classList.toggle("dark-mode");
   // 同步修改按钮文字
   toggleBtn.innerText = isDarkMode ? '浅色模式' : '深色模式';
}
</script>
</body>
</html>

核心修改说明 #

1. 修复了原代码document.page无法正确获取页面元素的问题，将page类移到body标签上，实现整个页面主题统一控制
2. 通过后代选择器.dark-mode #themeToggle实现按钮样式自动跟随主题切换，无需额外写JS控制按钮类名，逻辑更简洁
3. 利用classList.toggle返回的布尔值直接判断当前主题状态，同步修改按钮文字，代码更高效

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