fix: UIUserInterfaceStyle is undefined for iOS <= 11 (#7931)

tests/app/application/application-tests-common.ts

@@ -23,5 +23,5 @@ export function testDisplayedEvent() {
 }
 
 export function testOrientation() {
-    TKUnit.assert(app.orientation, "Orientation not initialized.");
+    TKUnit.assert(app.orientation(), "Orientation not initialized.");
 }

tests/app/application/application-tests.android.ts

@@ -46,4 +46,9 @@ export function testAndroidApplicationInitialized() {
     TKUnit.assert(app.android.nativeApp, "Android nativeApp not initialized.");
     TKUnit.assert(app.android.orientation, "Android orientation not initialized.");
     TKUnit.assert(app.android.packageName, "Android packageName not initialized.");
+    TKUnit.assert(app.android.systemAppearance, "Android system appearance not initialized.");
+}
+
+export function testSystemAppearance() {
+    TKUnit.assert(app.systemAppearance(), "System appearance not initialized.");
 }

tests/app/application/application-tests.ios.ts

@@ -1,5 +1,6 @@
 /* tslint:disable:no-unused-variable */
 import * as app from "tns-core-modules/application";
+import { ios } from "tns-core-modules/utils/utils";
 import * as TKUnit from "../tk-unit";
 
 export * from "./application-tests-common";
@@ -46,6 +47,21 @@ export function testIOSApplicationInitialized() {
     TKUnit.assert(app.ios.delegate, "iOS delegate not initialized.");
     TKUnit.assert(app.ios.nativeApp, "iOS nativeApp not initialized.");
     TKUnit.assert(app.ios.orientation, "iOS orientation not initialized.");
+
+    if (ios.MajorVersion <= 11) {
+        TKUnit.assertNull(app.ios.systemAppearance, "iOS system appearance should be `null` on iOS <= 11.");
+    } else {
+        TKUnit.assert(app.ios.systemAppearance, "iOS system appearance not initialized.");
+    }
+
     TKUnit.assert(app.ios.window, "iOS window not initialized.");
     TKUnit.assert(app.ios.rootController, "iOS root controller not initialized.");
 }
+
+export function testSystemAppearance() {
+    if (ios.MajorVersion <= 11) {
+        TKUnit.assertNull(app.systemAppearance(), "System appearance should be `null` on iOS <= 11.");
+    } else {
+        TKUnit.assert(app.systemAppearance(), "System appearance not initialized.");
+    }
+}

tests/app/ui/styling/root-views-css-classes-tests.ts

@@ -8,6 +8,7 @@ import {
 } from "tns-core-modules/application";
 import {
     isAndroid,
+    isIOS,
     device
 } from "tns-core-modules/platform";
 import { Button } from "tns-core-modules/ui/button/button";
@@ -21,6 +22,7 @@ import {
     _rootModalViews
 } from "tns-core-modules/ui/core/view/view-common";
 import { DeviceType } from "tns-core-modules/ui/enums/enums";
+import { ios as iosUtils } from "tns-core-modules/utils/utils";
 
 const CLASS_NAME = "class-name";
 const ROOT_CSS_CLASS = "ns-root";
@@ -32,6 +34,8 @@ const TABLET_DEVICE_TYPE_CSS_CLASS = "ns-tablet";
 const PORTRAIT_ORIENTATION_CSS_CLASS = "ns-portrait";
 const LANDSCAPE_ORIENTATION_CSS_CLASS = "ns-landscape";
 const UNKNOWN_ORIENTATION_CSS_CLASS = "ns-unknown";
+const DARK_SYSTEM_APPEARANCE_CSS_CLASS = "ns-dark";
+const LIGHT_SYSTEM_APPEARANCE_CSS_CLASS = "ns-light";
 
 function _test_root_view_root_css_class(shouldSetClassName: boolean) {
     const rootView = getRootView();
@@ -221,6 +225,66 @@ export function test_root_view_class_name_preserve_orientation_css_class() {
     _test_root_view_orientation_css_class(true);
 }
 
+function _test_root_view_system_appearance_css_class(shouldSetClassName: boolean) {
+    const rootView = getRootView();
+    if (shouldSetClassName) {
+        rootView.className = CLASS_NAME;
+    }
+
+    const rootViewCssClasses = rootView.cssClasses;
+    let systemAppearance;
+
+    if (isAndroid) {
+        systemAppearance = android.systemAppearance;
+    } else {
+        systemAppearance = ios.systemAppearance;
+    }
+
+    if (isIOS && iosUtils.MajorVersion <= 12) {
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            DARK_SYSTEM_APPEARANCE_CSS_CLASS),
+            `${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            LIGHT_SYSTEM_APPEARANCE_CSS_CLASS),
+            `${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
+        );
+    } else if (systemAppearance === "dark") {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            DARK_SYSTEM_APPEARANCE_CSS_CLASS),
+            `${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            LIGHT_SYSTEM_APPEARANCE_CSS_CLASS),
+            `${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
+        );
+    } else if (systemAppearance === "light") {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            LIGHT_SYSTEM_APPEARANCE_CSS_CLASS),
+            `${LIGHT_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            DARK_SYSTEM_APPEARANCE_CSS_CLASS),
+            `${DARK_SYSTEM_APPEARANCE_CSS_CLASS} CSS class is present`
+        );
+    }
+
+    if (shouldSetClassName) {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            CLASS_NAME),
+            `${CLASS_NAME} CSS class is missing`
+        );
+    }
+}
+
+export function test_root_view_system_appearance_css_class() {
+    _test_root_view_system_appearance_css_class(false);
+}
+
+export function test_root_view_class_name_preserve_system_appearance_css_class() {
+    _test_root_view_system_appearance_css_class(true);
+}
+
 function _test_modal_root_view_modal_css_class(shouldSetClassName: boolean) {
     let modalClosed = false;
 

tns-core-modules/application/application.d.ts

@@ -311,9 +311,10 @@ export function orientation(): "portrait" | "landscape" | "unknown";
 
 /**
  * Gets the operating system appearance.
- * Available values: "dark", "light".
+ * Available values: "dark", "light", null.
+ * Null for iOS <= 11.
  */
-export function systemAppearance(): "dark" | "light";
+export function systemAppearance(): "dark" | "light" | null;
 
 /**
  * This is the Android-specific application object instance.
@@ -636,9 +637,10 @@ export interface iOSApplication {
 
     /**
      * Gets the system appearance.
-     * Available values: "dark", "light".
+     * Available values: "dark", "light", null.
+     * Null for iOS <= 11.
      */
-    systemAppearance: "dark" | "light";
+    systemAppearance: "dark" | "light" | null;
 
     /**
      * The [UIApplication](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIApplication_Class/index.html).

tns-core-modules/application/application.ios.ts

@@ -120,7 +120,13 @@ class IOSApplication implements IOSApplicationDefinition {
         return this._window.rootViewController;
     }
 
-    get systemAppearance(): "light" | "dark" {
+    get systemAppearance(): "light" | "dark" | null {
+
+        // userInterfaceStyle is available on UITraitCollection since iOS 12.
+        if (majorVersion <= 11) {
+            return null;
+        }
+
         if (!this._systemAppearance) {
             const userInterfaceStyle = this.rootController.traitCollection.userInterfaceStyle;
             this._systemAppearance = getSystemAppearanceValue(userInterfaceStyle);
@@ -482,7 +488,10 @@ function setupRootViewCssClasses(rootView: View): void {
     pushToRootViewCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`);
     pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
     pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`);
+
+    if (majorVersion >= 13) {
         pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.systemAppearance}`);
+    }
 
     const rootViewCssClasses = getRootViewCssClasses();
     rootViewCssClasses.forEach(c => rootView.cssClasses.add(c));