您是否曾经在网站上的深色和浅色主题之间切换并想过“我希望我的网站也能做到这一点”？嗯，现在可以了。在本文中，我将向您展示如何使用 HTML、CSS 和 JavaScript 在 Web 项目中实现深色和浅色模式，为您的用户提供最佳的视觉体验。
先决条件：要理解本教程，需要对 HTML 和 CSS 有基本的了解。
在网站上设置暗模式/亮模式的关键组件是：
网页
主题之间切换的按钮
要切换的主题或颜色
切换主题和按钮文本背后的逻辑。
设置您的项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Tour App</title>
</head>
<body>
<div class="hero-sec">
<div class="col1">
<h1>Everyday Is a Journey</h1>
<p>Visit any Location Virtually, Anytime, Anywhere</p>
<button>Tour</button>
</div>
<div class="col2">
<img src="img.jpg" alt="landscape" width="560px">
</div>
</div>
</body>
</html>
纯网页的输出
添加主题切换按钮很重要。这是触发从浅色模式到深色模式颜色变化的按钮，反之亦然。
<button id="toggle-button">Dark mode</button>
这是至关重要的一步，因为这里涉及到两个主题或颜色。我们需要一种方法，用几行代码将不同的样式附加到网页上。我们将使用 CSS 变量进行主题化。如果您对 CSS 变量感到陌生，请阅读我的文章。
第 1 步：
声明浅色主题的样式
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
第 2 步：
声明深色主题的类
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
// This is the class that will be added onclick of the button
注意：变量名必须相同。
这可以在没有变量的情况下仅使用 body 元素来完成。但是，最好使用 CSS 变量，因为许多场合需要更改的不仅仅是背景颜色。一些 Web 应用程序主题需要更改文本颜色、边框颜色、阴影等。因此使用变量可以完全控制所有元素，尤其是在大型应用程序中。
让我们完成网页的样式。确保您的 CSS 链接到 HTML 文件。
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
body{
background: var(--bg);
color: var(--color);
font-family: monospace
}
.hero-sec{
display: flex;
justify-content: space-evenly;
color: var(--color);
margin-top: 48px;
}
.col1{
margin-top: 6rem;
height: 40%;
}
h1{
font-size: 2.5rem;
}
p{
font-size: 1.3rem;
}
button{
padding: 1rem 2rem;
background-color: #3f51b5;
color: #ffffff;
border: none;
cursor: pointer;
}
.hero-sec button{
font-size: 1.3rem;
}
输出
当用户单击切换按钮时，我们预计会发生两件事。
网站的主题或颜色模式应该更改。
按钮上的文字应该改变。
更改主题
操作 DOM（文档对象模型）来获取网页的按钮和正文。
声明一个函数，将“dark”类添加到 body 元素（我们已经在 css 中声明）。
用户单击暗/亮模式按钮后调用该函数。确保您的 JS 链接到您的 HTML。
const toggleBtn = document.getElementById("toggle-button")
const body = document.body
function toggleTheme() {
body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);
更改文本
将另一个代码块添加到toggleTheme 函数。此代码仅意味着如果正文包含“dark”类，则将文本切换为“Light mode”，反之亦然。
if (body.classList.contains("dark")) {
toggleBtn.textContent = "Light Mode";
} else {
toggleBtn.textContent = "Dark Mode";
}
这可以在一行中完成，以获得更清晰的代码。
toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"
是的，您现在可以切换主题。很酷吧？查看随附的视频以获取完整演示。
通过遵循本教程中概述的步骤，您可以为用户提供选择他们喜欢的主题的灵活性，使您的网络应用程序更具吸引力和易于访问。
如果您喜欢我的文章，您可以给我买杯咖啡来支持我的工作
阅读我关于渐进式 Web 应用程序、网络最内部工作原理、CSS 变量、前端开发初学者指南等的其他文章。
请点赞、评论并关注更多网络开发和技术相关文章。快乐编码！！！
以上是如何在 Web 应用程序中实现深色/浅色主题的详细内容。更多信息请关注PHP中文网其他相关文章！
