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 andblack
text. - If Alert is triggered from
tns-core-modules/ui/dialogs
, the button style is not displaying correctly.