深色模式是一种使用深色背景和浅色文本和元素的显示设置。它之所以受到欢迎,是因为它看起来不错并且具有多种实际好处。
深色模式的好处包括:
在本教程中,我们将介绍如何使用 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); }
现在我们可以将主体的类别更改为深色或浅色来切换主题。首先,在标题中添加一个按钮,并为其点击事件设置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中文网其他相关文章!