主题切换的轻量级实现

2024-02-04 05:14:38

引言

如今，许多网站都提供了夜间模式和浅色模式供用户选择。这两种模式可以根据个人喜好或环境条件提供更舒适的浏览体验。传统的主题切换方法通常涉及复杂的 JavaScript 代码和额外的 CSS 样式表。然而，本文将介绍一种更简单、更轻量级的解决方案，仅需使用基本的 CSS 就可以实现。

实现步骤

1. 创建 CSS 变量

首先，在 CSS 文件中创建两个 CSS 变量，分别用于夜间模式和浅色模式的颜色：

:root {
  --night-background: #000;
  --day-background: #fff;
}

2. 设置背景颜色

接下来，使用 CSS 变量将背景颜色设置为用户选择的模式。例如：

body {
  background-color: var(--night-background);
}

.day-mode {
  background-color: var(--day-background);
}

3. 添加切换按钮

最后，添加一个按钮或链接，允许用户切换模式。这个按钮可以触发一个 JavaScript 函数，该函数将切换 day-mode 类。

<button onclick="toggleMode()">切换模式</button>

<script>
function toggleMode() {
  document.body.classList.toggle('day-mode');
}
</script>

实例

以下是一个使用该方法实现主题切换的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --night-background: #000;
      --day-background: #fff;
    }

    body {
      background-color: var(--night-background);
    }

    .day-mode {
      background-color: var(--day-background);
    }
  </style>
</head>
<body>
  <h1>主题切换</h1>
  <button onclick="toggleMode()">切换模式</button>

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