深色模式对于任何网站都非常重要。不同兴趣的用户访问网站。有些人喜欢深色模式，有些人喜欢浅色模式。
根据一项调查，大约 70% 到 80% 的人喜欢深色模式，只有 20% 到 30% 的人喜欢浅色模式。因此，有必要为任何网站创建一个深色模式，允许用户在深色和浅色模式之间切换。
下面，我们将使用 HTML、CSS 和 JavaScript 创建一个简单的网页。此外，我们还将学习使用 JavaScript 和 CSS 实现明暗模式。
语法
用户可以按照以下语法在深色和浅色主题之间切换。
body.classList.toggle("dark-theme");
在上面的语法中，我们将深色主题类名作为切换方法的参数传递。它在特定的 HTML 元素中添加和删除类。
算法
用户可以按照以下算法在深色和浅色主题之间切换。
-
第 1 步 – 为网页编写 HTML 代码，并像往常一样为浅色主题应用 CSS。
-
第 2 步 – 使用 CSS 创建深色主题的样式。
-
第 3 步 – 创建一个按钮，并在按钮中添加 onclick 事件。当用户单击该按钮时，它应该在深色和浅色主题之间切换。
-
步骤 4 – 要在深色和浅色主题之间切换，我们可以从元素中添加和删除特定的类。例如，为深色主题创建一个类，并为深色主题创建 CSS。当我们在body中添加dark-theme类时，深色主题应该应用于整个网站，当我们删除它时，它应该是正常的。
示例 1
在下面的示例中，当用户单击按钮时，我们调用changeMode()函数。 changeMode() 函数根据主题更改按钮的文本。
此外，我们使用 document.body 访问整个网页，并使用 JavaScript 将 dark-theme 类添加到整个网页，以将主题更改为深色模式。
<html>
<head>
<style>
body {
color: black;
background-color: rgb(241, 241, 241);
text-align: center;
justify-content: center;
}
.dark-theme {
color: white;
background-color: rgb(26, 20, 20);
}
button {
width: 13rem;
height: 2rem;
font-size: 1.5rem;
background-color: aqua;
border: none;
border-radius: 12px;
}
p {
font-size: 1.2rem;
}
</style>
</head>
<body>
<h2>Using the <i> toggle method to </i> toggle between light and dark mode in JavaScript. </h2>
<p>This is the content of the webpage. </p>
<button onclick = "changeMode()" id = "button"> Dark Mode </button>
<script>
function changeMode() {
var body = document.body;
// toggle the theme
body.classList.toggle("dark-theme");
let button = document.getElementById('button');
// change the button text
if (button.innerHTML == "Dark Mode") {
button.innerHTML = "Normal Mode";
} else {
button.innerHTML = "Dark Mode"
}
}
</script>
</body>
</html>
示例 2
在下面的示例中，我们使用 HTML 和 CSS 创建了切换开关按钮。我们使用了切换开关的复选框。因此，每当用户选中该复选框时，开关就会打开。因此，我们可以根据是否选中该复选框来添加和删除深色主题的类。
此外，我们还使用了JQuery的addClass()和removeClass()方法来添加和删除主体中的类。
<html>
<head>
<style>
body {
color: black;
background-color: rgb(241, 241, 241);
text-align: center;
justify-content: center;
}
.dark-class {
color: white;
background-color: rgb(12, 10, 10);
}
p {
font-size: 1.2rem;
}
.toggleButton {
width: 5rem;
height: 2rem;
position: relative;
display: inline-block;
}
.toggleButton input {
opacity: 0;
}
.roundButton {
background-color: black;
top: 0;
left: 0;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}
.roundButton:before {
left: 0;
bottom: 0;
position: absolute;
content: "";
background-color: grey;
transition: 1s;
height: 2rem;
width: 2rem;
}
input:checked+.roundButton {
background-color: white;
}
input:checked+.roundButton:before {
transform: translateX(3rem);
}
.roundButton.circle {
border-radius: 2rem;
}
.roundButton.circle:before {
border-radius: 50%;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
</head>
<body>
<h2>Using the <i> JQuery </i> to toggle between light and dark modes in JavaScript.</h2>
<p>This is the content of the webpage.</p>
<label class = "toggleButton">
<input type = "checkbox" id = "toggle">
<div class = "roundButton circle" ></div>
</label>
<script>
// If the input checkbox is checked, activate dark mode by adding dark-class to the body
$('#toggle').change(() => {
if ($('#toggle').is(":checked")) {
$("body").addClass("dark-class");
} else {
$("body").removeClass("dark-class")
}
})
</script>
</body>
</html>
我们学会了使用 JavaScript 和 JQuery 在深色模式和浅色模式之间进行切换。我们需要更改网页的 CSS 并将 CSS 应用于深色主题。我们可以通过在网页中添加和删除类来将 CSS 应用到暗模式。
以上就是如何使用 JavaScript/jQuery 为网站创建暗/亮模式？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 JavaScript/jQuery 为网站创建暗/亮模式？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
