黑暗模式作为一种方便的选择而继续受到欢迎，它使用户能够以较少的眼睛疲劳来体验网络。 面对现实吧，我们所有人都倾向于花更多的时间在屏幕上，而不是应该花在盯着屏幕上，因此，给用户带来的任何额外的便利（如暗模式）都可以走很长一段路。
操作系统、程序和浏览器通常包含内置的暗模式功能，但一些开发人员通过为其包含自定义暗模式体验将其提升到另一个层次。 网站Web. 这个想法是为了更好地控制他们的外观 网站Web 在黑暗模式下，无需在品牌和/或设计上妥协。
在本教程中，我们将向您展示如何从头开始在Divi中创建自定义暗模式切换而无需插件。 使用此暗模式切换功能，您将可以控制暗模式设计，并根据您的品牌定制更好的用户体验。
让我们开始吧！
概观
这是我们将在本教程中构建的设计的预览。
这是我们要创建的自定义暗模式切换。
这是应用于黑暗模式之前和之后的预定义布局之一。
这是添加到全局标题的暗模式切换。 请注意，在浏览站点时，亮/暗模式如何保持。
第1部分：从黑暗模式构建开关
在本教程的第一部分中，我们将在 Divi 中使用页面构建暗模式切换。 使用代码创建切换后，您将能够将其保存在 Divi 库中并将其添加到您的任何位置 网站Web.
首先，在前端使用Divi从头开始构建时，请在默认部分添加一列。
添加摘要模块
为了构建自定义切换，我们将设计一个带有一些自定义CSS的Blurb模块。
将新的演示文稿文本模块添加到该行。
包装内容
退休 内容 标题和正文的默认虚拟值。 然后添加方形图标代替图像。
概念
转到设计设置并更新以下内容：
- 图标颜色：＃666666
- 图像/图标对齐：左
- 图标字体大小：22像素
- 宽度：50px
- 模块对齐：中心
- 高度：25px
- 保证金：0像素低
- 圆角：4px
- 边框宽度：2px
- 边框颜色：＃666666
自定义CSS
设计到位后，切换到高级选项卡。 在“自定义CSS”下，将以下“自定义CSS”添加到main元素，以确保圆角样式不会遮盖溢出。
溢出：可见！
然后将以下自定义CSS添加到After元素中：
内容：“浅”；位置：绝对；左：-35像素；上：0像素；
这会向Blurb模块添加标签，点击后我们将其从“浅”更改为“暗”。
正文文字设计
由于post伪元素文本继承了正文文本样式，因此可以使用Divi选项添加正文文本样式，如下所示：
- 身体字体：Roboto
- 正文文字颜色：＃666666
- 正文文本大小：13px
- 身体字母的间距：1px
使用代码模块添加自定义代码
为了添加必要的代码（CSS / JQuery）来操作暗模式切换，我们将使用代码模块。
在同一列的Blurb模块下创建一个新的代码模块。
然后将以下代码粘贴到代码区域中：
/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});
添加自定义CSS类
自定义代码要求您将自定义CSS类添加到Blurb模块或开关。 这将使Blub触发暗模式切换和单击功能。
Blurb模块类
打开Blurb模块设置，并添加一个自定义CSS类，如下所示：
- CSS类：et-dark-toggle
具备深色模式的等级
我们还需要向要具有暗模式功能的每个Divi元素添加一个自定义CSS类。 元素具有CSS类后，该元素将在启用暗模式后在我们添加的代码中继承自定义“暗模式” CSS。 这种方法使我们可以更好地控制暗模式设计，因为某些元素在暗模式下可能不需要样式。
首先，我们可以将暗模式添加到包含暗模式切换的部分。
打开部分参数，并添加以下CSS类：
- CSS类：et-dark-mode-capable
第2部分：向Divi页面添加暗模式功能
既然我们已经有了CSS代码和类，我们就可以将Dark Mode功能和设计应用于Divi中的整个页面。 为此，我们将使用移动应用程序登录页面的预制布局。
要添加布局，请打开视觉生成器底部的设置菜单，然后单击添加新布局图标。
然后从“预定义的布局”选项卡中选择移动应用程序登录页面的布局。
确保选项“替换” 内容 未选择“现有”。 您不想使用深色模式切换来清除该部分。
由于深色模式样式仅适用于具有“ capable and-dark-mode” CSS类的元素，因此我们可以选择以不同方式添加到页面。
- 我们可以将CSS类分别添加到页面的每个元素。
- 我们可以将CSS类扩展到整个页面上的元素（这比手动完成要快）。 例如，我们可以打开顶部的部分设置，并将该部分的CSS类扩展到页面的所有部分。
- 我们可以将CSS类添加到元素的全局默认值。 这会将CSS类应用于所有站点范围的元素，从而在整个站点中增加了暗模式功能。 例如，我们可以打开区域设置，然后单击全局默认图标以更改全局区域默认值。 然后，我们可以添加CSS类并将其注册为网站所有部分的CSS类。
将CSS类添加到页面元素
对于此示例，我们将通过向部分和文本模块的全局默认值添加CSS类来更新页面元素。 并且，我们还将在其他页面元素上添加一些内容。
所有部分
要将CSS类添加到所有部分，请打开包含黑暗模式切换开关的顶部部分的设置。 然后更改部分全局默认值，并将以下CSS类添加到部分全局默认值：
- CSS类：et-dark-mode-capable
所有专业部分
还将CSS类添加到专门部分中的全局默认值。
文字模块
然后打开页面上文本模块之一的设置，并将相同的CSS类添加到全局文本默认值。
要测试结果，请转到实时页面，然后单击页面顶部的暗模式切换。
这是页面在清除模式下的外观。
这是页面在暗模式下的外观。
其他资源
这是其他人 RESSOURCES 你可能会感兴趣。
最后的想法
为Divi网站配备自定义的暗模式切换功能可能是提高用户体验并创建令人愉悦和轻松的全新设计的好方法。 希望对您有用。
