feat(ios-dark-mode): adapt dynamic system colors (#7826)

Author: vchimev

tests/app/ui/page/page-tests-common.ts

@@ -24,6 +24,7 @@ import { Color } from "tns-core-modules/color";
 import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view/tab-view";
 import { _resetRootView } from "tns-core-modules/application";
 import { Button } from "tns-core-modules/ui/button/button";
+import { ios } from "tns-core-modules/utils/utils";
 
 export function addLabelToPage(page: Page, text?: string) {
     const label = new Label();
@@ -376,15 +377,18 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
     TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#0000FF");
 }
 
-export function test_page_backgroundColor_is_white() {
+export function test_page_backgroundColor() {
     const page = new Page();
-    page.id = "page_test_page_backgroundColor_is_white";
+    page.id = "page_test_page_backgroundColor";
+
     const factory = () => page;
     helper.navigate(factory);
-    const whiteColor = new Color("white");
+
     if (isIOS) {
-        TKUnit.assertTrue(whiteColor.ios.CGColor.isEqual(page.nativeViewProtected.backgroundColor.CGColor), "page default backgroundColor should be white");
+        const backgroundColor = ios.MajorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor;
+        TKUnit.assertEqual(page.nativeView.backgroundColor, backgroundColor, "page backgroundColor is wrong");
     } else {
+        const whiteColor = new Color("white");
         TKUnit.assertEqual(page.nativeViewProtected.getBackground().getColor(), whiteColor.android, "page default backgroundColor should be white");
     }
 }

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

@@ -27,6 +27,7 @@ import { ios } from "../utils/utils";
 const IOS_PLATFORM = "ios";
 
 const getVisibleViewController = ios.getVisibleViewController;
+const majorVersion = ios.MajorVersion;
 
 // NOTE: UIResponder with implementation of window - related to https://github.com/NativeScript/ios-runtime/issues/430
 // TODO: Refactor the UIResponder to use Typescript extends when this issue is resolved:
@@ -81,6 +82,7 @@ class CADisplayLinkTarget extends NSObject {
 }
 
 class IOSApplication implements IOSApplicationDefinition {
+    private _backgroundColor = majorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor;
     private _delegate: typeof UIApplicationDelegate;
     private _window: UIWindow;
     private _observers: Array<NotificationObserver>;
@@ -159,10 +161,9 @@ class IOSApplication implements IOSApplicationDefinition {
 
         this._window = UIWindow.alloc().initWithFrame(UIScreen.mainScreen.bounds);
         // TODO: Expose Window module so that it can we styled from XML & CSS
-        this._window.backgroundColor = UIColor.whiteColor;
+        this._window.backgroundColor = this._backgroundColor;
 
         this.notifyAppStarted(notification);
-
     }
 
     public notifyAppStarted(notification?: NSNotification) {

tns-core-modules/ui/activity-indicator/activity-indicator.ios.ts

@@ -2,11 +2,18 @@ import { ActivityIndicatorBase, busyProperty, colorProperty, Color } from "./act
 
 export * from "./activity-indicator-common";
 
+import { ios } from "../../utils/utils";
+
+const majorVersion = ios.MajorVersion;
+
 export class ActivityIndicator extends ActivityIndicatorBase {
     nativeViewProtected: UIActivityIndicatorView;
 
+    private _activityIndicatorViewStyle = majorVersion <= 12 ? UIActivityIndicatorViewStyle.Gray : UIActivityIndicatorViewStyle.Medium;
+
     createNativeView() {
-        const view = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(UIActivityIndicatorViewStyle.Gray);
+        const viewStyle = this._activityIndicatorViewStyle;
+        const view = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(viewStyle);
         view.hidesWhenStopped = true;
 
         return view;

tns-core-modules/ui/page/page.ios.ts

@@ -282,19 +282,21 @@ class UIViewControllerImpl extends UIViewController {
     }
 }
 
-const whiteColor = new Color("white").ios;
 export class Page extends PageBase {
     nativeViewProtected: UIView;
     viewController: UIViewControllerImpl;
 
+    private _backgroundColor = majorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor;
     private _ios: UIViewControllerImpl;
     public _presentedViewController: UIViewController; // used when our page present native viewController without going through our abstraction.
 
     constructor() {
         super();
         const controller = UIViewControllerImpl.initWithOwner(new WeakRef(this));
         this.viewController = this._ios = controller;
-        controller.view.backgroundColor = whiteColor;
+
+        // Make transitions look good
+        controller.view.backgroundColor = this._backgroundColor;
     }
 
     createNativeView() {

tns-core-modules/ui/tabs/tabs.ios.ts

@@ -90,10 +90,20 @@ class UIPageViewControllerImpl extends UIPageViewController {
         }
 
         tabBar.delegate = this.tabBarDelegate = MDCTabBarDelegateImpl.initWithOwner(new WeakRef(owner));
-        tabBar.tintColor = UIColor.blueColor;
-        tabBar.barTintColor = UIColor.whiteColor;
-        tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
-        tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected);
+
+        if (majorVersion <= 12) {
+            tabBar.tintColor = UIColor.blueColor;
+            tabBar.barTintColor = UIColor.whiteColor;
+            tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
+            tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected);
+        } else {
+            tabBar.tintColor = UIColor.systemBlueColor;
+            tabBar.barTintColor = UIColor.systemBackgroundColor;
+            tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Normal);
+            tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Selected);
+            tabBar.inkColor = UIColor.clearColor;
+        }
+
         tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
         tabBar.alignment = MDCTabBarAlignment.Leading;
         tabBar.sizeToFit();

tns-core-modules/ui/text-base/text-base.ios.ts

@@ -5,10 +5,14 @@ import {
     textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, lineHeightProperty,
     FormattedString, Span, Color, isBold, resetSymbol
 } from "./text-base-common";
-import { isString } from "../../utils/types";
 
 export * from "./text-base-common";
 
+import { isString } from "../../utils/types";
+import { ios } from "../../utils/utils";
+
+const majorVersion = ios.MajorVersion;
+
 export class TextBase extends TextBaseCommon {
 
     public nativeViewProtected: UITextField | UITextView | UILabel | UIButton;
@@ -194,8 +198,12 @@ export class TextBase extends TextBaseCommon {
             dict.set(NSParagraphStyleAttributeName, paragraphStyle);
         }
 
-        if (style.color && (dict.size > 0 || isTextView)) {
-            dict.set(NSForegroundColorAttributeName, style.color.ios);
+        if (dict.size > 0 || isTextView) {
+            if (style.color) {
+                dict.set(NSForegroundColorAttributeName, style.color.ios);
+            } else if (majorVersion >= 13) {
+                dict.set(NSForegroundColorAttributeName, UIColor.labelColor);
+            }
         }
 
         const text = this.text;

tns-core-modules/ui/text-view/text-view.ios.ts

@@ -8,9 +8,12 @@ import {
     CSSType
 } from "../editable-text-base";
 
+export * from "../editable-text-base";
+
 import { profile } from "../../profiling";
+import { ios } from "../../utils/utils";
 
-export * from "../editable-text-base";
+const majorVersion = ios.MajorVersion;
 
 class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
     public static ObjCProtocols = [UITextViewDelegate];
@@ -113,6 +116,9 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     private _isShowingHint: boolean;
     public _isEditing: boolean;
 
+    private _hintColor = majorVersion <= 12 ? UIColor.blackColor.colorWithAlphaComponent(0.22) : UIColor.placeholderTextColor;
+    private _textColor = majorVersion <= 12 ? null : UIColor.labelColor;
+
     createNativeView() {
         const textView = NoScrollAnimationUITextView.new();
         if (!textView.font) {
@@ -173,7 +179,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
                 // Use semi-transparent version of color for back-compatibility
                 this.nativeTextViewProtected.textColor = color.ios.colorWithAlphaComponent(0.22);
             } else {
-                this.nativeTextViewProtected.textColor = UIColor.blackColor.colorWithAlphaComponent(0.22);
+                this.nativeTextViewProtected.textColor = this._hintColor;
             }
         } else {
             const color = this.style.color;
@@ -182,8 +188,8 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
                 this.nativeTextViewProtected.textColor = color.ios;
                 this.nativeTextViewProtected.tintColor = color.ios;
             } else {
-                this.nativeTextViewProtected.textColor = null;
-                this.nativeTextViewProtected.tintColor = null;
+                this.nativeTextViewProtected.textColor = this._textColor;
+                this.nativeTextViewProtected.tintColor = this._textColor;
             }
         }
     }