用 CSS 无缝集成全站黑暗模式

如果您想让您的网站更现代、更易于使用，那么添加黑暗模式是一个不错的选择。但是，实现它可能会很棘手，尤其是如果您不确定从哪里开始。

别担心！本文将指导您完成使用 CSS 集成全站黑暗模式的各个步骤。我们将介绍基础知识，包括 CSS 变量，并提供分步指南来设置您的网站。

CSS 变量：黑暗模式的基础

在 CSS 中，变量允许您存储和重用值，包括颜色值。这使得在整个网站中更改颜色变得更加容易，无论是在正常模式还是在黑暗模式下。

要定义 CSS 变量，请使用 -- 符号，后跟变量的名称，然后是冒号和值。例如：

--primary-color: #000;
--secondary-color: #fff;

然后，您可以在样式表中使用变量来设置颜色值：

body {
  color: var(--primary-color);
}

h1 {
  color: var(--secondary-color);
}

在您的网站中设置黑暗模式

现在您已经了解了 CSS 变量的基础知识，让我们开始在您的网站中设置黑暗模式吧。

1. 创建两个 CSS 文件： 一个用于正常模式，一个用于黑暗模式。例如，您可以将它们命名为 light.css 和 dark.css。

2. 在两个文件中定义 CSS 变量： 确保在正常模式文件中使用正常模式下的颜色值，而在黑暗模式文件中使用黑暗模式下的颜色值。

3. 链接到 CSS 文件： 在您的 HTML 文件中，将 <link> 标记添加到您的两个 CSS 文件：

<link rel="stylesheet" href="light.css">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

4. 添加媒体查询： (prefers-color-scheme: dark) 媒体查询将只在用户启用操作系统或浏览器中的黑暗模式时加载 dark.css 文件。

5. 切换模式： 要允许用户在正常模式和黑暗模式之间切换，您可以添加一个按钮或链接来触发切换。例如：

<button onclick="toggleDarkMode()">切换到黑暗模式</button>

<script>
function toggleDarkMode() {
  document.body.classList.toggle("dark-mode");
}
</script>

结论

通过使用 CSS 变量，您可以轻松地在您的网站中实现黑暗模式，从而改善用户体验并吸引更广泛的受众。遵循本指南中的步骤，您将能够无缝集成全站黑暗模式，并为您的用户提供更多控制。