如何使用 JavaScript/jQuery 为网站创建暗/亮模式？

深色模式对于任何网站都非常重要。不同兴趣的用户访问网站。有些人喜欢深色模式，有些人喜欢浅色模式。

根据一项调查，大约 70% 到 80% 的人喜欢深色模式，只有 20% 到 30% 的人喜欢浅色模式。因此，有必要为任何网站创建一个深色模式，允许用户在深色和浅色模式之间切换。

下面，我们将使用 HTML、CSS 和 JavaScript 创建一个简单的网页。此外，我们还将学习使用 JavaScript 和 CSS 实现明暗模式。

语法

用户可以按照以下语法在深色和浅色主题之间切换。

立即学习“Java免费学习笔记（深入）”；

body.classList.toggle("dark-theme");

在上面的语法中，我们将深色主题类名作为切换方法的参数传递。它在特定的 HTML 元素中添加和删除类。

算法

用户可以按照以下算法在深色和浅色主题之间切换。

• 第 1 步 - 为网页编写 HTML 代码，并像往常一样为浅色主题应用 CSS。

• 第 2 步 - 使用 CSS 创建深色主题的样式。

• 第 3 步 - 创建一个按钮，并在按钮中添加 onclick 事件。当用户单击该按钮时，它应该在深色和浅色主题之间切换。

  

  动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

  动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

  下载

• 步骤 4 - 要在深色和浅色主题之间切换，我们可以从元素中添加和删除特定的类。例如，为深色主题创建一个类，并为深色主题创建 CSS。当我们在body中添加dark-theme类时，深色主题应该应用于整个网站，当我们删除它时，它应该是正常的。

示例 1

在下面的示例中，当用户单击按钮时，我们调用changeMode()函数。 changeMode() 函数根据主题更改按钮的文本。

此外，我们使用 document.body 访问整个网页，并使用 JavaScript 将 dark-theme 类添加到整个网页，以将主题更改为深色模式。

   


   
Using the  toggle method to  toggle between light and dark mode in JavaScript. 
   
This is the content of the webpage. 
    Dark Mode 
   

示例 2

在下面的示例中，我们使用 HTML 和 CSS 创建了切换开关按钮。我们使用了切换开关的复选框。因此，每当用户选中该复选框时，开关就会打开。因此，我们可以根据是否选中该复选框来添加和删除深色主题的类。

此外，我们还使用了JQuery的addClass()和removeClass()方法来添加和删除主体中的类。

   
   


   
Using the  JQuery  to toggle between light and dark modes in JavaScript.
   
This is the content of the webpage.
   
      
      

   
   

我们学会了使用 JavaScript 和 JQuery 在深色模式和浅色模式之间进行切换。我们需要更改网页的 CSS 并将 CSS 应用于深色主题。我们可以通过在网页中添加和删除类来将 CSS 应用到暗模式。