暗黑模式 / 夜间模式

⚠️️ 这个 NativeScript 插件可能会在未来变得过时，因为出色的 NativeScript 团队正在努力实现内置对暗黑模式（以及更多功能）的支持。如果您感兴趣，请订阅此问题。

这是关于什么的？

随着 iOS 13 的推出，苹果推出了一种新的暗黑模式，希望开发者采用。更重要的是，iOS 将主动改变您应用原生 UI 组件的外观，因此您 将 受此变化影响。

因此，为了能够在启用暗黑模式时加载不同的 CSS、图片或其他资源，您需要一种可以检查的属性，以及当用户在手机设置中启用/禁用暗黑模式时的通知。

这正是此插件的作用所在。

请注意，只要您不使用 Xcode 11 进行构建，即使运行 iOS 13 的设备也不会受到影响。

顺便说一下，Android 自 API 级别 8 就支持“夜间模式”，但供应商需要正确地向用户公开。NativeScript-Android 应用不受此设置的影响，但您也可以将 Android 的夜间模式与 iOS 的暗黑模式采用相同的逻辑，因此此插件统一了这些 API。

安装

tns plugin add nativescript-dark-mode

示例应用

如果您遇到困难或想快速了解此插件的工作原理，请查看示例应用

git clone https://github.com/EddyVerbruggen/nativescript-dark-mode
cd nativescript-dark-mode/src
npm run demo.ios # or demo.android

API

isDarkModeSupported

暗黑模式是在 iOS 13 中添加的，因此您可以检查此函数。这不是必需的，因为当调用其他 API 函数时，插件将负责此检查。

import { isDarkModeSupported } from "nativescript-dark-mode";

const supported: boolean = isDarkModeSupported();

isDarkModeEnabled

如果您在任何时候想检查暗黑模式是否已启用，您可以这样做

import { isDarkModeEnabled } from "nativescript-dark-mode";

const darkModeEnabled: boolean = isDarkModeEnabled();

addOnDarkModeChangedListener

要获得运行中的应用的通知，您可以注册一个插件监听器。

如果您希望在应用启动时也收到通知，请确保在应用启动前完成此操作。例如，请参阅此存储库中示例文件夹中的 app.ts。

import { addOnDarkModeChangedListener } from "nativescript-dark-mode";

addOnDarkModeChangedListener((isDarkMode: boolean) => {
  console.log("Now on dark mode? " + isDarkMode);
});

setDarkModeStyleSheet（不稳定）

⚠️ 此功能可能会在未来的版本中删除，因为我们可能会很快找到更好的（内置）方式。

如果您想在启用暗黑模式时加载不同的样式表，那么就没有必要再寻找其他方法了。但是，目前有一个限制：样式表 仅在冷启动时应用，因此如果用户在应用运行时切换到暗黑模式，您的应用将不会受到影响，直到下一次重启。

import { setDarkModeStyleSheet } from "nativescript-dark-mode";

setDarkModeStyleSheet("./app-dark.css");

提示：您可以将所有主题无关的 CSS 从 app.css 提取到 app-common.css，并添加一个 app-dark.css，它（就像 app.css 一样）扩展 app-common.css。请参阅此存储库中示例文件夹的示例。