焕发个性 - 随心切换深色模式

2024-01-17 09:47:13

深色模式近年来备受关注，许多主流网站都增加了对它的支持。这是一种通过改变网站界面的颜色方案来让用户体验更舒适的趋势。在浅色模式下，背景通常为白色，而文本为黑色。在深色模式下，背景通常为黑色，而文本为白色。

使用CSS实现自动加载深色模式

要自动加载网站的深色模式，我们可以使用CSS media query。CSS media query是一种用于检测设备特性的CSS规则，它允许我们根据设备的特性来设置不同的样式。

以下是使用CSS media query来自动加载网站深色模式的示例代码：

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

这段代码告诉浏览器，如果用户启用了深色模式，则将网站的背景颜色设置为黑色，并将文本颜色设置为白色。

使用JavaScript实现自动加载深色模式

我们还可以使用JavaScript来实现自动加载网站的深色模式。以下是使用JavaScript来自动加载网站深色模式的示例代码：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark-mode');
}

这段代码会检查用户是否启用了深色模式，如果启用了，则将class="dark-mode"添加到html元素上。我们可以使用这个class来改变网站的样式。

设置用户偏好

除了使用CSS或JavaScript来自动加载深色模式，我们还可以允许用户设置他们的偏好。我们可以通过提供一个开关来让用户选择是否启用深色模式。以下是设置用户偏好的示例代码：

<label for="dark-mode-toggle">深色模式</label>
<input type="checkbox" id="dark-mode-toggle">

<script>
  const darkModeToggle = document.getElementById('dark-mode-toggle');

  darkModeToggle.addEventListener('change', () => {
    if (darkModeToggle.checked) {
      document.documentElement.classList.add('dark-mode');
    } else {
      document.documentElement.classList.remove('dark-mode');
    }
  });
</script>