为什么要采用深色模式？

谁不喜欢暗黑模式？如今，它无处不在——从您最喜欢的网站和桌面应用程序到您的移动设备。就客户体验而言，这是您获得用户喜爱的流畅体验的绝佳方式。因此，这引出了一个问题：“我该如何在我的应用程序中实现暗黑模式 Mendix 应用？”

我在这里告诉你如何做，这很简单！

我们要做的第一件事就是找到一个需要暗模式处理的应用程序。对于那些参加了最近 Mendix 您可能对 Lato Bikes 很熟悉——我们创建这家公司是为了展示 Mendix 收养历程 约翰·登·汉的主题演讲.

产品页面特别明亮，可以采用暗色模式处理。让我们看看我们如何做到这一点。

暗黑模式，一步步来

首先，我们将在项目中添加一个名为 DarkMode 的新模块，并为该模块添加一个用户角色（每个人都应该被允许使用暗模式！）。在这个新模块中，我们将创建一个名为 _darkmode.scss 的 SASS 文件。— 确保将其作为导入添加到主文件中！

接下来，在新的 SASS 文件中，我们将开始构建暗色主题。我喜欢将其作为所有内容的覆盖，因此我通常会从以下类似内容开始：

html 主体{

背景颜色：$gray-darker；
颜色：#fff；
h1、h2、h3、h4、h5、.widget-eventTime、.widget-timeline-title、h6、.h1、.h2、.h3、.h4、.h5、.h6{

颜色：#fff；

}
//在这里继续添加样式... 

}

我会一点一点地修改背景颜色、边框和字体颜色，直到我对整体外观和感觉感到满意。就像这样……

一旦你找到了满意的主题，我们就需要让它可切换，以便客户可以选择是否使用它。为了演示的目的，我们将把它构建为适用于此会话的切换，但它可以很容易地成为与客户帐户关联的永久设置。为此，你需要在 SASS 文件中添加一些额外的内容。

为“html body”添加“.darkmode”样式。这意味着只要将“darkmode”类添加到 body，您的新外观和感觉就会应用。

接下来我们要添加一个实体来跟踪暗黑模式是开启还是关闭。我们将在此演示中将其设为非持久性，并将其链接到客户的会话。然后，我们将关联的安全性设置为“只读”，并将“已启用”标志的安全性设置为“读/写”。

之后，我们将为客户提供打开和关闭它的方法。我们将抓取几个图标，然后将它们添加到新的图像集合中，一个用于亮模式，一个用于暗模式。

然后我们将创建一个 Snippet，它将有一个 Switch 控件来切换该布尔值。它需要使用我们之前创建的 DarkMode 实体。首先，代码片段应该看起来像这样……

如果将其放入较大的区域，末尾的额外列有助于使其保持集中，您会注意到数据源不是代码片段上的上下文条目，而是 DataView。这是因为我们要将其放在布局模板中，以便 Switch 在每个页面上都可用。在布局模板上使用代码片段时，它需要加载自己的数据源，在本例中，我们使用 DataView 和 Microflow 来执行此操作。

Microflow 数据源是 DS_DarkMode，它应该返回链接到当前会话的 DarkMode 实体，或者如果还没有，则返回链接到当前会话的新实体。它应该看起来像这样……

在代码片段上要做的最后一件事是为 Switch 提供一个 OnChange 事件。该事件应触发 Nanoflow。我已将 Nanoflow 称为 OCh_DarkModeToggle，Nanoflow 所做的一切就是调用 JavaScript 操作。该操作将在调用时向主体添加或删除“暗模式”类。这可以简单地使用 JavaScript 类切换方法来完成，但我决定使其更明确，以便可以绝对使用。

首先，我创建了一个带有 IsEnabled 参数的 Action，然后添加了这个函数：

导出异步函数 JS_DarkMode(isEnabled) {

// 开始用户代码 

如果（已启用）{

document.body.classList.add(“暗黑模式”);

} {

document.body.classList.remove(“暗黑模式”);

}

// 最终用户代码 

}

 最后一步是将您的代码片段添加到您的布局模板中，然后您就可以开始了！

发布后，您会在标题中找到一个 Switch 控件，轻拂它即可应用和删除暗黑模式样式。如果您想更进一步，您甚至可以检测客户桌面主题的设置，并使用它来选择是否应用暗黑模式。

如果（window.matchMedia && window.matchMedia（'（prefers-color-scheme：dark）'）。匹配）{
document.body.classList.add(“暗黑模式”);
}

希望本文能帮助您实现暗黑模式！如果有帮助，请联系我们并发送一些截图或链接 — 我们很想看看它的效果如何！