深色模式对于任何网站都非常重要。不同兴趣的用户访问网站。有些人喜欢深色模式，有些人喜欢浅色模式。
根据一项调查，大约 70% 到 80% 的人喜欢深色模式，只有 20% 到 30% 的人喜欢浅色模式。因此，有必要为任何网站创建一个深色模式，允许用户在深色和浅色模式之间切换。
下面，我们将使用 HTML、CSS 和 JavaScript 创建一个简单的网页。此外，我们还将学习使用 JavaScript 和 CSS 实现明暗模式。
语法
用户可以按照以下语法在深色和浅色主题之间切换。
立即学习“Java免费学习笔记（深入）”；
body.classList.toggle("dark-theme");
在上面的语法中，我们将深色主题类名作为切换方法的参数传递。它在特定的 HTML 元素中添加和删除类。
算法
用户可以按照以下算法在深色和浅色主题之间切换。
第 1 步 – 为网页编写 HTML 代码，并像往常一样为浅色主题应用 CSS。
第 2 步 – 使用 CSS 创建深色主题的样式。
AIBox 一站式AI创作平台
AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型
31 查看详情 
第 3 步 – 创建一个按钮，并在按钮中添加 onclick 事件。当用户单击该按钮时，它应该在深色和浅色主题之间切换。
步骤 4 – 要在深色和浅色主题之间切换，我们可以从元素中添加和删除特定的类。例如，为深色主题创建一个类，并为深色主题创建 CSS。当我们在body中添加dark-theme类时，深色主题应该应用于整个网站，当我们删除它时，它应该是正常的。
示例 1
在下面的示例中，当用户单击按钮时，我们调用changeMode()函数。 changeMode() 函数根据主题更改按钮的文本。
此外，我们使用 document.body 访问整个网页，并使用 JavaScript 将 dark-theme 类添加到整个网页，以将主题更改为深色模式。
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; } Using the toggle method to toggle between light and dark mode in JavaScript.
This is the content of the webpage.
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" } }
示例 2
在下面的示例中，我们使用 HTML 和 CSS 创建了切换开关按钮。我们使用了切换开关的复选框。因此，每当用户选中该复选框时，开关就会打开。因此，我们可以根据是否选中该复选框来添加和删除深色主题的类。
此外，我们还使用了JQuery的addClass()和removeClass()方法来添加和删除主体中的类。
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%; } Using the JQuery to toggle between light and dark modes in JavaScript.
This is the content of the webpage.
// 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") } })
我们学会了使用 JavaScript 和 JQuery 在深色模式和浅色模式之间进行切换。我们需要更改网页的 CSS 并将 CSS 应用于深色主题。我们可以通过在网页中添加和删除类来将 CSS 应用到暗模式。
以上就是如何使用 JavaScript/jQuery 为网站创建暗/亮模式？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/529063.html
微信扫一扫 
支付宝扫一扫 
