无惧页面机制，手把手实现深色模式

2024-02-07 19:26:36

前言

作为一名前端开发者，满足用户需求是我们的使命。随着越来越多的人重视夜间模式浏览，手动实现深色模式已成为一项必备技能。本教程将深入浅出地讲解如何使用 CSS 变量、媒体查询和 CSS 滤镜，一步步为你实现网页深色模式。

CSS 变量之魅

CSS 变量的出现，让我们得以轻松控制样式的全局性。通过定义一个 CSS 变量，我们可以轻松地更改整个网页的配色方案。为此，我们在 :root 伪类中定义一个名为 --background-color 的 CSS 变量，用于控制网页背景颜色。

:root {
  --background-color: #fff; /* 默认白色背景 */
}

媒体查询的妙用

媒体查询允许我们根据设备的特性和用户偏好，针对性地应用 CSS 样式。在我们的案例中，我们将使用媒体查询来检测用户是否启用了深色模式，如果是，则切换 --background-color 变量的值。

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000; /* 深色模式下背景变为黑色 */
  }
}

CSS 滤镜的魔法

为了进一步增强深色模式的视觉效果，我们可以使用 CSS 滤镜。CSS 滤镜可以对元素应用各种效果，例如模糊、色相调整和对比度调整。在此，我们将使用 invert() 滤镜将页面元素的颜色反转，以实现深色模式。

body {
  filter: invert(1);
}

实战演练

现在，让我们把这些概念付诸实践。创建一个新的 HTML 文件，并在其中包含以下代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --background-color: #fff;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --background-color: #000;
      }
    }

    body {
      filter: invert(1);
    }
  </style>
</head>
<body>
  <h1>手动实现深色模式</h1>
  <p>欢迎来到夜间模式的世界！</p>
</body>
</html>