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

介绍

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

深色模式的好处包括：

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

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

设置项目

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

实现深色模式样式

选择颜色

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

Name	Light version	Dark version
body-bg	#f4f4f4	#121212
primary-text	#333333	#e0e0e0
header-footer-bg	#333333	#181818
header-footer-text	#ffffff	#ffffff
section-bg	#ffffff	#1f1f1f
secondary-text	#006baf	#1e90ff
shadow	rgba(0, 0, 0, 0.1)	rgba(0, 0, 0, 0.2)

自定义变量

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

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

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

动态元素颜色

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

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

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

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

使用 JavaScript 切换亮/暗模式

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

<button onclick="changeTheme()" class="theme-toggle">
    <svg> <!-- icon --> </svg>
</button>

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

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

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

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

下一步

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

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

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

body.dark {
  color-scheme: dark;
}

结论

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

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

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