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
UIUserInterfaceStyleentry if exists from Info.plist
- For Android, add
uiModeto 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.
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¶
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
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/
SAP Icon / Font Icon¶
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¶
const applicationModule = anyClientAPI.nativescript.applicationModule; console.log("Current device appearance: " + applicationModule.systemAppearance());
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.
- On Android dark theme, the EULA page is displaying with
- If Alert is triggered from
tns-core-modules/ui/dialogs, the button style is not displaying correctly.