请注意，本教程基于在 Mendix modeller 版本 9.20。其他版本可能有所不同。

这篇文章是关于什么的

在本文中，我们将介绍如何创建暗黑模式 Mendix 原生移动应用。最终结果是让应用根据用户的移动设置自动切换到暗模式（或亮模式）。如果他们的手机已经处于暗模式，则应用将显示为暗模式，反之亦然。

这篇文章是什么 不是 关于

请注意，这篇文章不是关于如何在亮模式和暗模式之间创建切换开关的教程。（您可以在以下位置阅读更多相关信息： 如何在你的应用中实现暗黑模式) 我们今天要讨论的是如何让你的应用在用户手机处于暗黑模式时自动切换到暗黑模式版本。

教程

Step1：创建自定义主题模块

创建自定义主题模块时，使用的方法与我们为 Web 应用创建自定义主题模块的方法类似。在应用资源管理器中单击鼠标右键，然后选择“添加模块”。

确保以可识别的方式重命名。例如，如果您的品牌名为“Smith Company”，则主题模块可以是“smith_theme”。在示例中，我将模块重命名为“sampleapp_theme”。

我们还应该将此模块标记为 UI 资源模块。右键单击模块并选择“将其标记为 UI 资源模块”。这应该会将模块变为绿色。

将其标记为 UI 资源模块可以帮助团队快速找到自定义样式的位置。

创建自定义主题模块是一种将与特定品牌相关的所有样式集中到一处的有效方法。如果您需要在属于此品牌的另一个应用中重复使用相同的样式，只需导出自定义主题模块并将其导入到新应用中即可。

在原生移动应用中，自定义类会添加到自定义主题模块中的“main.js”中。其位置为：主题源 > [您的自定义主题模块] > main.js

这也是我们将添加暗模式功能的地方。

第 2 步：添加创建暗黑模式所需的模块

为了为应用程序创建暗模式，我们需要在“main.js”文件中添加两内容。

首先，我们需要在文件顶部添加“外观”模块。添加此模块可以让我们确定应用程序的首选配色方案。（要了解有关“外观”的更多信息，请参考此链接： https://reactnative.dev/docs/appearance).

其次，我们需要添加一个“darkMode”变量。这是为应用程序中的特定组件实现暗模式版本之前所必需的。代码如下所示：

第 3 步：测试一下

在此示例中，我创建了一个包含一些文本和图像的标签容器：

当我们现在运行该应用程序时，它看起来如下所示：

注意：这是应用程序在亮模式和暗模式下的当前外观。

让我们给标签容器一个类。双击标签容器，转到“外观”，然后给它一个类。在此示例中，我的类是“sampleTab”：

注意：类必须采用驼峰式命名法（第一个单词的首字母小写，此后单词的首字母大写）。

在“main.js”文件中，让我们更改选项卡的背景颜色、指示器（即选定选项卡的下划线）、标签和活动标签：

如第 8 行注释所示，为暗黑模式添加替代样式的格式是在变量的属性中添加 darkmode ? [暗黑模式] : [亮黑模式] 。

保存所有内容并运行项目。

功能验证

这是灯光模式下的结果：

这是暗黑模式下的结果：

您可以随意调整亮色模式和暗色模式的颜色和对比度。以下是该应用程序的更精美版本，供您参考。

灯光模式：

注：书中图片是我自己创作的。

暗模式：

注：书中图片是我自己创作的。

更高级版本的项目文件（包括 Studio Pro 建模器上的应用程序布局和代码）可在此处下载： https://www.mendix.com/wp-content/uploads/DarkModeSampleApp-2.mpk_.zip

感谢您的学习，希望您喜欢本教程！