一触即变，打造属于你自己的暗黑模式世界

2022-12-04 19:17:24

一键切换暗黑模式：打造非凡视觉体验

体验暗黑模式的魅力

当屏幕上的白光变得刺眼时，暗黑模式就像一股清风，让你的眼睛得以舒缓。它将明亮的背景转换成深色调，带来更加舒适的视觉体验，特别是对于长时间使用设备的人。无论是在昏暗的房间中浏览网页，还是在夜间工作，暗黑模式都能为你的设备带来全新的外观，减少眼睛疲劳，提升专注力。

一键切换，随心所欲

如今，许多设备和应用程序都支持一键切换暗黑模式的功能。只需轻轻一点，你就可以在白天和黑夜模式之间轻松切换，打造属于自己的定制化视觉体验。这一便捷的操作方式让你可以根据不同的环境和喜好，随时随地享受暗黑模式带来的舒适。

实现一键切换暗黑模式

要实现一键切换暗黑模式，你需要对HTML、CSS和JavaScript代码进行一些简单的修改。创建一个HTML页面，其中包含一个开关按钮元素，并为其添加事件监听器。当用户点击按钮时，JavaScript代码会切换body元素的背景颜色和按钮本身的颜色。

<html>
<head>
  <style>
    body {
      background-color: white;
      color: black;
    }

    #toggle-button {
      background-color: black;
      color: white;
      padding: 10px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <button id="toggle-button">Toggle Dark Mode</button>
  <script>
    const toggleButton = document.getElementById('toggle-button');

    toggleButton.addEventListener('click', () => {
      const body = document.body;

      if (body.style.backgroundColor === 'white') {
        body.style.backgroundColor = 'black';
        body.style.color = 'white';
        toggleButton.style.backgroundColor = 'white';
        toggleButton.style.color = 'black';
        toggleButton.innerHTML = 'Light Mode';
      } else {
        body.style.backgroundColor = 'white';
        body.style.color = 'black';
        toggleButton.style.backgroundColor = 'black';
        toggleButton.style.color = 'white';
        toggleButton.innerHTML = 'Dark Mode';
      }
    });
  </script>
</body>
</html>