如何在您的 Divi 站点中实现暗模式切换

已发表: 2020-05-21

深色模式作为一种方便的选项，让用户在减少眼睛疲劳的情况下体验网络，这种模式越来越受欢迎。让我们面对现实吧，我们都倾向于花更多的时间看屏幕，而不是我们应该花的时间，因此任何额外的用户体验舒适度（如暗模式）都会大有帮助。操作系统、程序和浏览器通常包含内置的暗模式功能，但一些开发人员通过为其网站包含自定义暗模式体验将其提升到另一个层次。这个想法是为了更好地控制他们的网站在黑暗模式下的外观，而不必在品牌和/或设计上妥协。

在本教程中，我们将向您展示如何在没有插件的情况下从头开始在 Divi 中创建自定义暗模式切换。使用此暗模式切换功能，您将可以控制暗模式设计，并为您的品牌量身定制更好的用户体验。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

这是我们将构建的自定义暗模式切换。

div 中的暗模式切换

这是应用于我们预制布局之一的黑暗模式的前后对比。

div 中的暗模式切换

这是添加到全局标题的暗模式切换。请注意在您浏览站点时亮/暗模式如何保持。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

分区通知框

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

扩展角标签

首先，您需要执行以下操作：

如果您还没有安装并激活 Divi 主题。
在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：构建暗模式切换

在本教程的第一部分中，我们将使用 Divi 中的页面构建暗模式切换。使用代码创建切换后，您将能够将其保存到 Divi 库并将其添加到您网站上的任何位置。

首先，在从头开始在前端使用 Divi 构建时，向默认部分添加一列行。

div 中的暗模式切换

添加模糊

为了构建自定义切换，我们将设计一个带有一些自定义 CSS 的模糊模块。

向该行添加一个新的模糊模块。

div 中的暗模式切换

内容

取出标题和正文的默认模拟内容。然后添加方形图标代替图像。

div 中的暗模式切换

设计

跳转到设计设置并更新以下内容：

图标颜色：#666666
图像/图标对齐方式：左
图标字体大小：22px

div 中的暗模式切换

宽度：50px
模块对齐：居中
高度：25px

div 中的暗模式切换

边距：0px 底部
圆角：4px
边框宽度：2px
边框颜色：#666666

div 中的暗模式切换

自定义 CSS

设计到位后，跳转到高级选项卡。在自定义 CSS 下，将以下自定义 CSS 添加到主元素，以确保不会从圆角样式中隐藏溢出。

overflow: visible !important;

然后将以下自定义 CSS 添加到 After 元素：

content: "light";
position: absolute;
left: -35px;
top:0px;

这会向模糊模块添加一个标签，我们将在单击时将其从“亮”更改为“暗”。

div 中的暗模式切换

正文设计

由于 after 伪元素中的文本继承了正文样式，我们可以使用 Divi 选项添加正文样式，如下所示：

正文字体：Roboto
正文颜色：#666666
正文大小：13px
正文字母间距：1px

div 中的暗模式切换

使用代码模块添加自定义代码

要添加必要的代码 (CSS/JQuery) 以使暗模式切换发挥其魔力，我们将使用代码模块。

在同一列中的 blurb 模块下创建一个新的代码模块。

div 中的暗模式切换

然后在代码框中粘贴以下代码：

<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>

div 中的暗模式切换

添加自定义 CSS 类

自定义代码要求您将自定义 CSS 类添加到模糊模块或切换。这将允许广告在点击时触发暗模式切换和功能。

模糊模块类

打开 blurb 模块设置并添加自定义 CSS 类，如下所示：

CSS 类：et-dark-toggle

div 中的暗模式切换

暗模式能力类

我们还需要为我们希望具有暗模式功能的每个 Divi 元素添加一个自定义 CSS 类。一旦元素具有 CSS 类，该元素将继承我们在开启暗模式后添加的代码中的“暗模式”自定义 CSS。这种方法使我们可以更好地控制暗模式设计，因为某些元素可能不需要任何暗模式样式。

首先，我们可以将暗模式添加到包含暗模式切换的部分。

打开部分设置并添加以下 CSS 类：

CSS 类：et-dark-mode-capable

div 中的暗模式切换

第 2 部分：向 Divi 页面添加暗模式功能

现在我们已经准备好了代码和 CSS 类，我们准备将暗模式功能和设计应用到 Divi 中的整个页面。为此，我们将使用我们的移动应用登陆页面预制布局。

要添加布局，请打开可视化构建器底部的设置菜单，然后单击添加新布局图标。

然后从预制布局选项卡下选择移动应用登陆页面布局。

确保未选择“替换现有内容”选项。您不想使用暗模式切换擦除该部分。

div 中的暗模式切换

由于暗模式样式仅适用于具有 CSS 类“et-dark-mode-capable”的元素，因此我们可以选择几种不同的方式添加到页面。

我们可以将 CSS 类单独添加到页面上的每个元素。
我们可以将 CSS 类扩展到整个页面的元素（这比手动完成每个元素要快）。例如，我们可以打开顶部部分的部分设置，并将该部分的 CSS 类扩展到整个页面的所有部分。
我们可以将 CSS 类添加到元素的全局默认值中。这会将 CSS 类应用于站点范围内的所有元素，从而在整个站点中添加暗模式功能。例如，我们可以打开部分设置并单击全局默认图标来编辑全局部分默认值。然后我们可以添加 CSS 类并将其保存为站点范围内所有部分的 CSS 类。