实现body含dark类时隐藏暗黑按钮、含light类时隐藏亮色按钮

HTML 结构 #

先写出两个主题切换按钮，给它们分别加上标识类名，方便后续控制：

<body class="light">
  <button class="theme-btn dark-btn">切换暗黑主题</button>
  <button class="theme-btn light-btn">切换亮色主题</button>
</body>

CSS 样式 #

通过CSS的类选择器组合，直接根据body的类名控制对应按钮的显示状态：

/* 按钮基础样式（可根据需求自定义） */
.theme-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 当body是dark主题时，隐藏暗黑按钮 */
body.dark .dark-btn {
  display: none;
}

/* 当body是light主题时，隐藏亮色按钮 */
body.light .light-btn {
  display: none;
}

JavaScript 交互 #

给按钮绑定点击事件，切换body的类名即可，CSS会自动处理按钮的显示/隐藏：

const darkBtn = document.querySelector('.dark-btn');
const lightBtn = document.querySelector('.light-btn');

darkBtn.addEventListener('click', () => {
  document.body.classList.remove('light');
  document.body.classList.add('dark');
});

lightBtn.addEventListener('click', () => {
  document.body.classList.remove('dark');
  document.body.classList.add('light');
});

这样就能实现需求：打开页面时默认显示暗黑按钮（因为body初始是light类），点击切换暗黑主题后，暗黑按钮隐藏、亮色按钮显示；切换回亮色主题时则反之。

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