如何在React网站中添加按钮替代回车键实现明暗模式切换

实现方案 #

1. 新增HTML按钮代码 #

在你网站需要放置切换入口的位置插入按钮代码，可自定义按钮文字和基础样式：

<!-- 给按钮添加inverted类可避免按钮被整体反色，不需要可以删掉 -->
<button id="toggleThemeBtn" class="inverted">切换明暗模式</button>

2. 替换原有JS代码 #

把你当前的JS代码替换为如下内容，核心是将原来的键盘监听改为按钮点击监听：

window.onload = function () {
  // 获取切换按钮DOM
  const toggleBtn = document.getElementById('toggleThemeBtn');

  // 绑定按钮点击触发明暗切换
  toggleBtn.addEventListener('click', function () {
    document.documentElement.classList.toggle("dark-mode");
    document.querySelectorAll(".inverted").forEach((result) => {
      result.classList.toggle("invert");
    });
  });

  // 若不需要保留原回车键切换功能，可删除下方这段代码
  document.onkeypress = function (e) {
    e = e || window.event;
    if (e.keyCode === 13) {
      toggleBtn.click();
    }
  };
};

可选：添加按钮固定样式 #

如果需要让按钮一直悬浮在页面角落方便用户点击，可以新增如下CSS：

#toggleThemeBtn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
}

你原有CSS代码不需要做任何修改，直接保留即可正常生效。

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