实现暗模式切换可以通过 CSS 变量（CSS Variables）和一些简单的 JavaScript 来实现。下面是一个基本的暗模式切换实现的步骤：

  1. 使用 CSS 变量定义颜色
    首先，在你的 CSS 中定义暗模式和默认模式下的颜色变量。例如：
:root {
  --bg-color-light: #ffffff; /* 默认模式下的背景颜色 */
  --text-color-light: #333333; /* 默认模式下的文字颜色 */
  
  --bg-color-dark: #333333; /* 暗模式下的背景颜色 */
  --text-color-dark: #ffffff; /* 暗模式下的文字颜色 */
}
  1. 应用 CSS 变量到你的页面元素
    接下来，将这些 CSS 变量应用到你的页面元素中：
body {
  background-color: var(--bg-color-light);
  color: var(--text-color-light);
}

/* 在暗模式下覆盖默认样式 */
body.dark-mode {
  background-color: var(--bg-color-dark);
  color: var(--text-color-dark);
}
  1. 添加暗模式切换按钮
    在页面上添加一个按钮，用于切换暗模式和默认模式。例如：
<button onclick="toggleDarkMode()">切换暗模式</button>
  1. 编写 JavaScript 函数切换暗模式
    最后，在 JavaScript 中编写一个函数来切换暗模式。这个函数将切换 body 元素的类名，从而应用相应的样式。
function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
}

完整示例
下面是一个完整的示例，演示了如何使用 CSS 变量和 JavaScript 来实现暗模式切换：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle</title>
  <style>
    :root {
      --bg-color-light: #ffffff;
      --text-color-light: #333333;
      
      --bg-color-dark: #333333;
      --text-color-dark: #ffffff;
    }

    body {
      background-color: var(--bg-color-light);
      color: var(--text-color-light);
    }

    body.dark-mode {
      background-color: var(--bg-color-dark);
      color: var(--text-color-dark);
    }
  </style>
</head>
<body>
  <h1>Dark Mode Toggle</h1>
  <button onclick="toggleDarkMode()">Toggle Dark Mode</button>

  <script>
    function toggleDarkMode() {
      document.body.classList.toggle('dark-mode');
    }
  </script>
</body>
</html>

通过这样的方式，你可以在网站上实现暗模式切换功能，使用户可以根据自己的喜好选择适合自己的模式。

版权属于：泽泽社长
本文链接：https://blog.zezeshe.com/archives/mode.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！