如何使用 CSS 和 JavaScript 将网站切换到深色模式

介绍

深色模式是一种使用深色背景搭配浅色文本和元素的显示设置。它之所以受到欢迎，是因为它看起来不错并且具有多种实际好处。

深色模式的好处包括：

1. 减少眼睛疲劳：黑暗模式可以减少眼睛发出的强光，特别是在弱光环境中。
2. 延长 OLED 屏幕的电池寿命：在 OLED（有机发光二极管）屏幕上，深色模式可以节省电池寿命，因为黑色像素基本上被关闭，与显示明亮的颜色相比，消耗的电量更少。

在本教程中，我们将介绍如何使用 CSS 和 JavaScript 将网站切换到深色模式。我们将从一个简单的浅色主题网页模板开始，将其改造成一个可切换浅色/深色模式的网站，让用户可以在浅色和深色主题之间顺利切换。

设置项目

让我们从一个简单的浅色主题网页模板开始。然后，我们将其改造成一个可切换明暗模式的网站，允许用户在明暗主题之间切换。

实现深色模式样式

选择颜色

第一步是列出我们正在使用的所有颜色，并为每种颜色选择一个深色主题版本。下表中，我列出了页面上的所有颜色及其对应的深色版本。

自定义变量

然后我们使用 CSS 变量在 body 上创建一个带有这些变量的深色和浅色类。

雷雷

您可以在使用 CSS 自定义属性中阅读有关 CSS 变量的内容。本质上，它们是使用两个破折号 (--) 定义的实体，用于存储值以便在文档中重用。 CSS 变量允许更改自动更新，使维护变得更加容易。

动态元素颜色

我们使用 var() CSS 函数插入 CSS 变量的值。这样，我们就可以动态更改颜色并更新一个变量以反映整个文档的更改，而不是手动更改每个变量。

这是 nav 元素及其子元素的示例：

雷雷

使用 JavaScript 切换亮/暗模式

现在我们可以将 body 的 class 更改为 dark 或 light 来切换主题。首先，在标题中添加一个按钮，并为其点击事件设置changeTheme()函数：

雷雷

定义切换主体类的changeTheme()函数：

雷雷

现在用户可以通过点击按钮来更改网站的主题。

您可以在下面的CodePen中看到教程的代码

下一步

此外，您可以将用户的主题偏好存储在本地存储中。更新 changeTheme() 函数以保存选定的主题并在页面加载时检查它，这将确保用户的选择被记住并在下次访问时自动应用。

雷雷

添加配色方案：深色；深色主题中的属性还可以确保某些难以设置样式的元素的样式将被浏览器更改。

雷雷

结论

总之，在您的网站中添加深色模式可以通过减少眼睛疲劳并延长 OLED 屏幕的电池寿命来改善用户体验。通过遵循本指南，您可以使用 CSS 和 JavaScript 轻松设置亮/暗模式切换。自定义深色模式以适合您的设计。

分享您的实现或在下面的评论中提出问题。

以上是如何使用 CSS 和 JavaScript 将网站切换到深色模式的详细内容。更多信息请关注PHP中文网其他相关文章！