CSS 变量成就暗黑模式，我的小铺博客闪耀登场

2024-02-04 12:17:33

最近，微信在苹果的紧逼下，开发了暗黑模式。越来越多的网站和应用都支持了暗黑模式，许多人也喜欢为网站选择暗黑模式，也许是更偏好这样的外观，又或许是想让自己的眼睛免受疲劳。这篇文章将带你领略 CSS 实现自动暗黑模式的魅力，让你根据访问者的主题来改变页面风格。我已在我的博客页面——我的小铺中实践了这项技术...

暗黑模式最近可谓风头正盛，自打微信在苹果的“督促”下开发了暗黑模式后，越来越多的网站和应用都加入了这一行列。许多人也喜欢为网站选择暗黑模式，也许是更偏好这样的外观，又或许是想让自己的眼睛免受疲劳。这篇文章将带你领略 CSS 实现自动暗黑模式的魅力，让你根据访问者的主题来改变页面风格。我已在我的博客页面——我的小铺中实践了这项技术。

CSS 变量助力暗黑模式

CSS 变量，又称 CSS 自变量，是一种可以在样式表中存储和管理的变量。这些变量就像容器，可以储存特定的值，比如颜色、字体或其他 CSS 属性。使用 CSS 变量的好处在于，你可以集中管理这些值，并在需要时轻松地对其进行更新或重用。

实现自动暗黑模式

利用 CSS 变量，我们可以实现自动暗黑模式。基本思路是创建一个 CSS 变量，存储网站的背景色，然后根据访问者的主题设置该变量的值。以下是实现步骤：

创建一个 CSS 变量，如 --bg-color，并将其设置为默认背景色。
在网站的根元素或 body 元素中添加一个 CSS 类，如 dark-mode，用于标记暗黑模式。
在 CSS 中，为 .dark-mode 类设置 --bg-color 变量为黑色或其他暗色。
使用 JavaScript 根据访问者的主题在网站的根元素或 body 元素上添加或删除 .dark-mode 类。

我的小铺实践

在我的小铺博客中，我使用上述技术实现了自动暗黑模式。具体步骤如下：

在我的 CSS 文件中，我创建了一个 CSS 变量 --bg-color，并将其设置为默认背景色白色。
我在网站的根元素上添加了一个 CSS 类 dark-mode，用于标记暗黑模式。
我编写了一个 JavaScript 函数，根据访问者的主题在网站的根元素上添加或删除 .dark-mode 类。

代码示例

:root {
  --bg-color: #fff;
}

.dark-mode {
  --bg-color: #000;
}

const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

prefersDarkMode.addEventListener('change', (e) => {
  e.matches ? document.documentElement.classList.add('dark-mode') : document.documentElement.classList.remove('dark-mode');
});