CSS 如何检测网站是否启用了暗黑模式

在本文中，我们将介绍如何使用CSS来检测网站是否启用了暗黑模式。暗黑模式越来越受欢迎，它能够改善用户体验并节省能源，因此开发人员有必要了解如何检测网站是否启用了该模式。

阅读更多：CSS 教程

使用CSS媒体查询检测暗黑模式

可以使用CSS媒体查询来检测暗黑模式是否启用。媒体查询是一种在CSS中根据设备属性或特征媒体类型应用CSS规则的方式。下面是一个示例代码，演示了如何检测暗黑模式：

@media (prefers-color-scheme: dark) {
  /* 在暗黑模式下应用的样式 */
  body {
    background-color: black;
    color: white;
  }
}

在上面的代码中，我们使用了@media规则，该规则指定了一种特殊的媒体类型：prefers-color-scheme。这个媒体类型允许我们根据用户设备的颜色方案来应用不同的CSS样式。如果用户启用了暗黑模式，prefers-color-scheme值将被设置为dark，我们可以利用这一点来针对暗黑模式应用特定的样式。

在上面的示例中，我们为body元素设置了背景颜色为黑色，文本颜色为白色。这样，如果用户的设备启用了暗黑模式，这些样式将会生效。

JavaScript检测暗黑模式

除了使用CSS之外，你还可以使用JavaScript来检测暗黑模式是否启用。下面是一个示例代码，演示了如何使用JavaScript来检测暗黑模式：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // 用户启用了暗黑模式
  document.body.classList.add('dark-mode');
} else {
  // 用户未启用暗黑模式
  document.body.classList.remove('dark-mode');
}

在上面的代码中，我们使用了JavaScript中的matchMedia方法来检测prefers-color-scheme媒体查询是否匹配。如果匹配，说明用户启用了暗黑模式，我们可以添加一个名为dark-mode的CSS类来为网站应用暗黑模式样式。否则，我们将移除该CSS类。

你可以根据具体的需求，对JavaScript代码进行自定义。例如，你可以使用localStorage来存储用户的暗黑模式偏好设置，并在页面加载时应用相应的样式。