暗模式作为一种方便的选择，让用户在减轻眼睛疲劳的情况下体验网络，越来越受欢迎。 让我们面对现实吧，我们都倾向于花更多的时间看屏幕而不是我们应该花的时间，所以对用户体验的任何额外舒适（如黑暗模式）都可以起到很长的作用。 操作系统、程序和浏览器通常包含内置的暗模式功能，但一些开发人员通过为其网站提供自定义暗模式体验，将其提升到另一个层次。 这个想法是更好地控制他们的网站在黑暗模式下的外观，而不必在品牌和/或设计上妥协。
在本教程中，我们将向您展示如何在没有插件的情况下从头开始在 Divi 中创建自定义暗模式切换。 借助此暗模式切换功能，您将可以控制暗模式设计，并为您的品牌量身定制更好的用户体验。
让我们开始吧！
抢先看
下面是我们将在本教程中构建的设计的快速浏览。
这是我们将构建的自定义暗模式切换。
这是应用于我们预制布局之一的黑暗模式的前后。
这是添加到全局标题的暗模式切换。 请注意在您浏览网站时如何保持亮/暗模式。
免费下载布局
要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将部分布局导入 Divi 库，请导航到 Divi 库。
单击导入按钮。
在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。
然后单击导入按钮。
完成后，部分布局将在 Divi Builder 中可用。
让我们进入教程，好吗？
你需要什么开始
要开始，您需要执行以下操作：
- 如果您还没有，请安装并激活 Divi 主题。
- 在 WordPress 中创建一个新页面，并使用 Divi Builder 在前端（可视化构建器）编辑页面。
- 选择“从头开始构建”选项。
之后，您将有一个空白画布开始在 Divi 中进行设计。
第 1 部分：构建暗模式切换
在本教程的第一部分，我们将在 Divi 中构建一个带有页面的暗模式切换。 使用代码创建切换后，您将能够将其保存到 Divi 库并将其添加到您网站上的任何位置。
首先，在从头开始在前端使用 Divi 构建时，将单列行添加到默认部分。
添加模糊
为了构建自定义切换，我们将设计一个带有一点自定义 CSS 的简介模块。
将新的简介模块添加到该行。
内容
取出标题和正文的默认模拟内容。 然后添加方形图标代替图像。
设计
跳转到设计设置并更新以下内容：
- 图标颜色：#666666
- 图像/图标对齐：左
- 图标字体大小：22px
- 宽度：50 像素
- 模块对齐：中心
- 高度：25 像素
- 边距：0px 底部
- 圆角：4px
- 边框宽度：2px
- 边框颜色：#666666
自定义 CSS
设计到位后，跳转到高级选项卡。 在自定义 CSS 下，将以下自定义 CSS 添加到主元素，以确保溢出不会隐藏在圆角样式中。
overflow: visible !important;
然后将以下自定义 CSS 添加到 After 元素：
content: "light"; position: absolute; left: -35px; top:0px;
这会为简介模块添加一个标签，我们将在点击时将其从“浅色”更改为“深色”。
正文文字设计
由于 after 伪元素中的文本继承了正文文本样式，我们可以使用 Divi 选项添加正文文本样式，如下所示：
- 正文字体：Roboto
- 正文颜色：#666666
- 正文大小：13px
- 正文字母间距：1px
使用代码模块添加自定义代码
要添加必要的代码 (CSS/JQuery) 以使暗模式切换发挥其魔力，我们将使用代码模块。
在同一列中的简介模块下创建一个新的代码模块。
然后在代码框中粘贴以下代码：
<style>
/**
* 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;
}
</style>
<script>
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 Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.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");
}
});
</script>
添加自定义 CSS 类
自定义代码要求您将自定义 CSS 类添加到简介模块或切换。 这将允许简介在点击时触发暗模式切换和功能。
模糊模块类
打开 blurb 模块设置并添加自定义 CSS 类，如下所示：
- CSS 类：et-dark-toggle
暗模式能力等级
我们还需要为每个想要具有暗模式功能的 Divi 元素添加自定义 CSS 类。 一旦元素具有 CSS 类，该元素将继承我们添加的代码中的“黑暗模式”自定义 CSS，一旦开启了黑暗模式。 这种方法让我们可以更好地控制暗模式设计，因为某些元素可能不需要任何暗模式样式。
首先，我们可以将暗模式添加到包含暗模式切换的部分。
打开部分设置并添加以下 CSS 类：
- CSS 类：et-dark-mode-capable
第 2 部分：将暗模式功能添加到 Divi 页面
现在我们已经有了代码和 CSS 类，我们准备将暗模式功能和设计应用到 Divi 中的整个页面。 为此，我们将使用我们的移动应用登陆页面预制布局。
要添加布局，请打开可视化构建器底部的设置菜单，然后单击添加新布局图标。
然后从预制布局选项卡下选择移动应用登陆页面布局。
确保未选择“替换现有内容”选项。 您不想使用暗模式切换删除该部分。
由于暗模式样式仅适用于具有 CSS 类“et-dark-mode-capable”的元素，我们可以选择几种不同的方式添加到页面。
- 我们可以将 CSS 类单独添加到页面上的每个元素。
- 我们可以将 CSS 类扩展到整个页面的元素（这比手动完成每个元素要快）。 例如，我们可以打开顶部的部分设置，并将该部分的 CSS 类扩展到整个页面的所有部分。
- 我们可以将 CSS 类添加到元素的全局默认值中。 这会将 CSS 类应用于站点范围内的所有元素，在整个站点中添加暗模式功能。 例如，我们可以打开部分设置并单击全局默认图标来编辑全局部分默认值。 然后我们可以添加 CSS 类并将其保存为站点范围内所有部分的 CSS 类。
将 CSS 类添加到页面元素
对于此示例，我们将通过将 CSS 类添加到部分和文本模块的全局默认值来更新页面元素。 我们还将在页面上的其他元素中添加一些内容。
所有部分
要将 CSS 类添加到所有部分，请打开包含暗模式切换的顶部部分的设置。 然后编辑该部分的全局默认值并将以下 CSS 类添加到部分全局默认值中：
- CSS 类：et-dark-mode-capable
所有专业部分
也将 CSS 类添加到专业部分的全局默认值中。
文本模块
接下来，打开页面上其中一个文本模块的设置，并将相同的 CSS 类添加到 Text Global Defaults。
简介
接下来，在页面布局中打开其中一个简介的设置，并将 CSS 类添加到 Blurb Global Defaults。
见证专栏
在页面布局的下方，有一些推荐，每个推荐都在一个带有自定义白色背景的列中。 要在暗模式下覆盖列样式，请将 CSS 类添加到其中一列并将其扩展到行中的其他列。
注意：将 CSS 类添加到列的全局默认值不是一个好主意，因为这会破坏一些设计元素（即，当大多数时间列背景为所有列时，它不是一个好主意是透明的）。
要测试结果，请跳转到实时页面并单击页面顶部的暗模式切换。
以下是浅色模式下页面的外观。
这是页面在黑暗模式下的样子。
第 3 部分：将暗模式切换添加到全局标题
如果您想在站点范围内扩展暗模式功能，最好将暗模式切换添加到 Divi Global Header。 这样一来，整个站点的用户都可以在一个方便的地方使用它。
将暗模式切换和代码保存到 Divi 库
但在你这样做之前，我们需要将暗模式切换和代码保存到 Divi 库。 这将更容易添加到我们网站的其他区域，包括全局标题。
回到…
