黑暗模式

要在网站或应用中实现黑暗模式，CSS提供了一些有效的技术和API。以下是实现黑暗模式的一种常见方法，包括使用CSS自定义属性（也称为CSS变量）、媒体查询（prefers-color-scheme），以及可能的JavaScript辅助方法。

1. 使用CSS自定义属性实现主题切换

CSS自定义属性允许您定义可以在任何选择器中重复使用的值。您可以为明亮模式和黑暗模式定义一组变量，然后根据用户的偏好切换这些变量。

/* 定义明亮模式的颜色 */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #0000ff;
}

/* 定义黑暗模式的颜色 */
[data-theme="dark"] {
  --background-color: #000000;
  --text-color: #ffffff;
  --link-color: #0096ff;
}

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

a {
  color: var(--link-color);
}

2. 使用`prefers-color-scheme`媒体查询

prefers-color-scheme CSS媒体特性用于检测用户系统是否已选择使用明亮模式或黑暗模式，并允许您相应地调整网页的颜色。

/* 明亮模式 */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #ffffff;
    --text-color: #000000;
    --link-color: #0000ff;
  }
}

/* 黑暗模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --text-color: #ffffff;
    --link-color: #0096ff;
  }
}

3. 结合JavaScript动态切换主题

虽然prefers-color-scheme能够让您基于用户的系统偏好自动切换主题，但有时您可能还希望提供一个切换按钮，让用户能够手动覆盖这个选择。这时就需要用到JavaScript。

<button id="theme-toggle">切换主题</button>

const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
});

总结实践

这篇文章介绍了使用CSS和JavaScript实现网站黑暗模式的基础方法。通过结合使用CSS自定义属性、prefers-color-scheme媒体查询以及可选的JavaScript代码，开发者可以灵活地为用户提供深色和浅色主题切换的功能。这种实现方式不仅增强了用户体验，还可以根据用户的系统设置自动适配显示模式，或允许用户根据个人喜好手动切换。

详细解答演示

在CSS中，:root伪类匹配文档树的根元素。在HTML中，这个根元素通常是<html>标签。通过在:root中定义CSS变量，你可以在整个文档中任何地方使用这些变量。这是一种定义全局CSS变量的常用方法。

[data-theme="dark"]是一个属性选择器，它选择所有具有data-theme="dark"属性的元素。这种方法通常用于在同一个HTML文档中应用不同的主题样式，比如明亮模式和黑暗模式。通过改变根元素（或任何其他元素）的data-theme属性值，你可以切换这些元素及其子元素的样式。

下面是一个简单的示例，展示如何实现基于data-theme属性切换明亮模式和黑暗模式的功能：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑暗模式示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="theme-toggle">切换主题</div>

<p>这是一个文本示例，看看主题如何切换。</p>

<script src="script.js"></script>
</body>
</html>

CSS (style.css)

:root {
  --background-color: #ffffff; /* 明亮模式背景色 */
  --text-color: #000000; /* 明亮模式文本颜色 */
  --link-color: #0000ff; /* 明亮模式链接颜色 */
}

[data-theme="dark"] {
  --background-color: #000000; /* 黑暗模式背景色 */
  --text-color: #ffffff; /* 黑暗模式文本颜色 */
  --link-color: #0096ff; /* 黑暗模式链接颜色 */
}

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

a {
  color: var(--link-color);
}

JavaScript (script.js)

document.getElementById('theme-toggle').addEventListener('click', function() {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? '' : 'dark'; // 如果当前是黑暗模式，则切换到明亮模式（移除属性），反之则切换到黑暗模式
  document.documentElement.setAttribute('data-theme', newTheme);
});

在这个示例中，当用户点击"切换主题"按钮时，JavaScript会检查当前页面是否使用了data-theme="dark"属性。如果是，它就移除这个属性，这样页面就会使用在:root中定义的明亮模式的颜色。如果不是，它就添加data-theme="dark"属性，页面随之变成黑暗模式的颜色。这种方式非常灵活，允许在不刷新页面的情况下即时切换主题。