Skip to content

Dark Mode Support (Mobile)

Android 10 (API 29) and iOS 13 introduce dark appearance for user interface elements.

User has the option to select the interface from device settings and Mobile Development Kit would display the user interface elements accordingly.

In order to support dark mode, if mdkproject is overriding AndroidManifest.xml (Android) or Info.plist (iOS) in app resources folder, certain changes need to be updated as below:

  • For iOS, remove the UIUserInterfaceStyle entry if exists from Info.plist
  • For Android, add uiMode to application.activity.android:configChanges attribute in AndroidManifest.xml

Appearance Specific Styles (.less)

User may add appearance specific less file (Styles.light.less and Styles.dark.less) in 'Styles' folder in metadata. There is no changes on the way to define the Styles property on Application.app in metadata. No need to specify .dark or .less in the theme value or path.

Mobile Development Kit would automatically select .light or .dark according to current appearance in device setting if the .light.less or .dark.less file is provided.

Examples:

  • Styles/Styles.light.less <-- will load this theme file in light mode.
  • Styles/Styles.dark.less <-- will load this theme file in dark mode.
  • Styles/Styles.less <-- This is always ignored in mobile app because appearance specific less files are provided.

Appearance Specific Images

Metadata Image

For appearance specific image, please add .dark or .light specifier before the extension (image.dark.png / image.light.png) into the Images folder. The extension of the image files need to be the same.

Mobile Development Kit would automatically select the image according to the current appearance from device setting. Samples of appearance specific image files to be placed in Images folder:

  • Images/myicon.dark.png
  • Images/myicon.light.png

Resource Icon

For iOS, refer to providing images for different appearances on iOS

To add appearance specific icon as imageset into application.mdkproject/App_Resources/iOS/Assets.xcassets

For Android, please refer to providing resources on Android

To add dark mode icons into night qualifier folder in application.mdkproject/App_Resources/Android/src/main/res/

  • res\drawable-night\
  • .....
  • res\drawable-night-xxhdpi
  • res\drawable-night-xxxhdpi

SAP Icon / Font Icon

For SAP Icon / Font Icon, the icon color changes automatically according to the appearance and specific element style where the icon is being displayed.

API For Appearance Setting

You can use ClientAPI.nativescript.applicationModule to get the current appearance setting via the systemAppearance() function.

Example:

const applicationModule = anyClientAPI.nativescript.applicationModule;
console.log("Current device appearance: " + applicationModule.systemAppearance());

To get the current UI appearance of the app, you can use the getAppearanceMode method in the ClientAPI.

export default function GetAppearanceMode(context) {
    let mode = context.getAppearanceMode();
    console.log("Current UI appearance: " + mode);
}

Switch Appearance

After switching appearance (from light to dark or vice versa), on resuming the app, the app would be navigated to main page automatically.

For iOS, the styles of new appearance would be applied and displayed automatically.

For Android, there are still some issues on displaying certain components with new appearance, hence an app relaunch is required to display the user interface in new appearance in full.

Known Issues

  • On Android dark theme, the EULA page is displaying with white background and black text.
  • If Alert is triggered from tns-core-modules/ui/dialogs, the button style is not displaying correctly.

Last update: August 23, 2023