Dark Mode / Night Mode
⚠️️ This NativeScript plugin may become obsolete in the near future, because the awesome NativeScript team is working on built-in support for Dark Mode (and much more). If you're interested, subscribe to this issue.
What's this all about?
With iOS 13 comes a new Dark Mode which Apple would like you (as a developer) to adopt. Even more, iOS will actively alter the appearance of your app's native UI components, so you will be affected by this change.
So to be able to load different CSS, images, or other assets when Dark Mode is enabled, you need some sort of property you can check and a notification when Dark Mode is enabled/disabled by the user in the phone's settings.
That's where this plugin comes in.
Note that as long as you don't build with Xcode 11, even devices running iOS 13 will not be affected.
By the way, Android has had "Night Mode" support since API level 8, but it's up to the vendors to expose it properly to users. NativeScript-Android apps are not affected by this setting, but you might as well apply the same logic to Android's Night Mode as you do to iOS' Dark Mode, so this plugin unifies those APIs.
tns plugin add nativescript-dark-mode
If you're stuck or want a quick demo of how this works, check out the demo app:
git clone https://github.com/EddyVerbruggen/nativescript-dark-modecd nativescript-dark-mode/srcnpm run demo.ios # or demo.android
Dark Mode was added in iOS 13, so you could check this function. It's not required as the plugin will take care of this check internally when the other API functions are called.
If at any moment you want to check for Dark Mode being enabled, you can do:
To get a notification while your app is running, you can register a listener with the plugin.
If you want to get notified on app launch as well, make sure to do this before the app starts.
As an example, see
app.ts in the demo folder in this repo.
⚠️ This feature will probably be removed in an upcoming version, because we'll likely have a better (built-in) way soon.
If you want to load a different stylesheet when Dark Mode is enabled, then look no further. There is one caveat though: currently, the stylesheet is only applied on a cold start, so if the user switched to Dark Mode while the app is running, your app won't be affected until the next restart.
TIP: you can extract all theme-independent CSS in
app-common.cssand add an
app-dark.cssthat (just like
app-common.css. Check the demo folder in this repo for an example.