CSS 如何在浏览器中检测操作系统是否处于深色模式

在本文中，我们将介绍如何使用CSS在浏览器中检测操作系统是否开启了深色模式。深色模式是一种在操作系统中使用黑暗背景和亮色文本的显示模式，它可以提供更好的可读性和更低的眼部疲劳。通过检测操作系统是否处于深色模式，我们可以针对不同模式下优化网站的样式和颜色。

阅读更多：CSS 教程

1. 使用CSS媒体查询检测深色模式

CSS提供了媒体查询功能，我们可以使用它来检测操作系统是否处于深色模式。具体步骤如下：

首先，我们需要创建一个支持深色模式的CSS样式表。在样式表中，我们可以为深色模式和浅色模式分别定义不同的样式。

/* 深色模式下的样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333333; /* 深色背景 */
    color: #ffffff; /* 亮色文本 */
  }
}

/* 浅色模式下的样式 */
@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff; /* 浅色背景 */
    color: #333333; /* 暗色文本 */
  }
}

在上述代码中，我们使用了@media规则，并通过prefers-color-scheme媒体特性来检测深色模式。如果操作系统处于深色模式下，将应用深色样式；如果处于浅色模式下，将应用浅色样式。你可以根据实际需求设置更多不同模式下的样式。

2. 使用CSS变量检测深色模式

除了使用媒体查询，我们还可以使用CSS变量来检测深色模式。CSS变量是一种可以在样式表中定义和使用的值。

/* 设置深色模式下的颜色变量 */
:root {
  --background-color: #333333; /* 深色背景 */
  --text-color: #ffffff; /* 亮色文本 */
}

/* 设置浅色模式下的颜色变量 */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff; /* 浅色背景 */
    --text-color: #333333; /* 暗色文本 */
  }
}

/* 应用颜色变量 */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

在上述代码中，我们使用了--background-color和--text-color两个CSS变量来定义不同模式下的颜色。在深色模式下，变量值为深色样式；在浅色模式下，变量值为浅色样式。在使用颜色时，我们直接使用var()函数引用变量。

这种方法能够有效地检测操作系统的深色模式，并根据不同模式应用相应的样式。

3. JavaScript与CSS的结合使用

虽然CSS可以通过媒体查询和变量来检测深色模式，但我们也可以结合JavaScript来进行更复杂的逻辑操作。

/* 使用CSS变量 */
:root {
  --background-color: #333333; /* 深色背景 */
  --text-color: #ffffff; /* 亮色文本 */
}

/* 使用JavaScript添加类名 */
<script>
  // 检测深色模式
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark-mode');
  }
</script>

/* 应用颜色变量 */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* 添加类名的样式 */
.dark-mode {
  background-color: var(--background-color);
  color: var(--text-color);
}

在上述代码中，我们首先通过CSS变量定义不同模式下的颜色。然后，通过JavaScript来检测深色模式，并使用classList.add()方法为根元素添加名为dark-mode的类名。通过添加类名，我们可以在CSS中针对不同模式应用不同的样式。

这种方法结合了CSS的灵活性和JavaScript的功能，可以实现更为复杂的逻辑判断和样式应用。