使用CSS 或 SASS 实现主题背景切换效果

/* 使用CSS实现按钮点击后背景颜色切换 */
.theme-switcher {
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 14px;
  text-decoration: none;
}
 
.theme-switcher.active {
  background-color: #007bff;
  color: #fff;
}
 
.theme-switcher:hover:not(.active) {
  background-color: #e7e7e7;
}
 
/* 使用JavaScript来处理点击事件 */
<script>
  document.querySelector('.theme-switcher').addEventListener('click', function() {
    this.classList.toggle('active');
  });
</script>

这段代码展示了如何使用CSS创建一个可以切换主题背景颜色的按钮。按钮在默认状态下是白色背景和黑色文字。在点击后，通过添加.active类，按钮背景切换为蓝色，文字颜色变为白色。同时，提供了悬停效果，当按钮没有激活（.active）时，悬停在按钮上会有一个浅灰色的背景。通过JavaScript的事件监听器，可以在用户点击按钮时切换.active类，实现主题切换的效果。