Skip to content

Commit f82cf08

Browse files
vchimevvchimev
authored
feat(ios-dark-mode): adapt dynamic system colors (#7826)
1 parent 82f2ccb commit f82cf08

7 files changed

Lines changed: 58 additions & 20 deletions

File tree

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { Color } from "tns-core-modules/color";
2424
import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view/tab-view";
2525
import { _resetRootView } from "tns-core-modules/application";
2626
import { Button } from "tns-core-modules/ui/button/button";
27+
import { ios } from "tns-core-modules/utils/utils";
2728

2829
export function addLabelToPage(page: Page, text?: string) {
2930
const label = new Label();
@@ -376,15 +377,18 @@ export function test_cssShouldBeAppliedAfterChangeToAllNestedElements() {
376377
TKUnit.assertEqual(stackLayout.style.backgroundColor.hex, "#0000FF");
377378
}
378379

379-
export function test_page_backgroundColor_is_white() {
380+
export function test_page_backgroundColor() {
380381
const page = new Page();
381-
page.id = "page_test_page_backgroundColor_is_white";
382+
page.id = "page_test_page_backgroundColor";
383+
382384
const factory = () => page;
383385
helper.navigate(factory);
384-
const whiteColor = new Color("white");
386+
385387
if (isIOS) {
386-
TKUnit.assertTrue(whiteColor.ios.CGColor.isEqual(page.nativeViewProtected.backgroundColor.CGColor), "page default backgroundColor should be white");
388+
const backgroundColor = ios.MajorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor;
389+
TKUnit.assertEqual(page.nativeView.backgroundColor, backgroundColor, "page backgroundColor is wrong");
387390
} else {
391+
const whiteColor = new Color("white");
388392
TKUnit.assertEqual(page.nativeViewProtected.getBackground().getColor(), whiteColor.android, "page default backgroundColor should be white");
389393
}
390394
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { ios } from "../utils/utils";
2727
const IOS_PLATFORM = "ios";
2828

2929
const getVisibleViewController = ios.getVisibleViewController;
30+
const majorVersion = ios.MajorVersion;
3031

3132
// NOTE: UIResponder with implementation of window - related to https://github.com/NativeScript/ios-runtime/issues/430
3233
// TODO: Refactor the UIResponder to use Typescript extends when this issue is resolved:
@@ -81,6 +82,7 @@ class CADisplayLinkTarget extends NSObject {
8182
}
8283

8384
class IOSApplication implements IOSApplicationDefinition {
85+
private _backgroundColor = majorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor;
8486
private _delegate: typeof UIApplicationDelegate;
8587
private _window: UIWindow;
8688
private _observers: Array<NotificationObserver>;
@@ -159,10 +161,9 @@ class IOSApplication implements IOSApplicationDefinition {
159161

160162
this._window = UIWindow.alloc().initWithFrame(UIScreen.mainScreen.bounds);
161163
// TODO: Expose Window module so that it can we styled from XML & CSS
162-
this._window.backgroundColor = UIColor.whiteColor;
164+
this._window.backgroundColor = this._backgroundColor;
163165

164166
this.notifyAppStarted(notification);
165-
166167
}
167168

168169
public notifyAppStarted(notification?: NSNotification) {

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@ import { ActivityIndicatorBase, busyProperty, colorProperty, Color } from "./act
22

33
export * from "./activity-indicator-common";
44

5+
import { ios } from "../../utils/utils";
6+
7+
const majorVersion = ios.MajorVersion;
8+
59
export class ActivityIndicator extends ActivityIndicatorBase {
610
nativeViewProtected: UIActivityIndicatorView;
711

12+
private _activityIndicatorViewStyle = majorVersion <= 12 ? UIActivityIndicatorViewStyle.Gray : UIActivityIndicatorViewStyle.Medium;
13+
814
createNativeView() {
9-
const view = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(UIActivityIndicatorViewStyle.Gray);
15+
const viewStyle = this._activityIndicatorViewStyle;
16+
const view = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(viewStyle);
1017
view.hidesWhenStopped = true;
1118

1219
return view;

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,19 +282,21 @@ class UIViewControllerImpl extends UIViewController {
282282
}
283283
}
284284

285-
const whiteColor = new Color("white").ios;
286285
export class Page extends PageBase {
287286
nativeViewProtected: UIView;
288287
viewController: UIViewControllerImpl;
289288

289+
private _backgroundColor = majorVersion <= 12 ? UIColor.whiteColor : UIColor.systemBackgroundColor;
290290
private _ios: UIViewControllerImpl;
291291
public _presentedViewController: UIViewController; // used when our page present native viewController without going through our abstraction.
292292

293293
constructor() {
294294
super();
295295
const controller = UIViewControllerImpl.initWithOwner(new WeakRef(this));
296296
this.viewController = this._ios = controller;
297-
controller.view.backgroundColor = whiteColor;
297+
298+
// Make transitions look good
299+
controller.view.backgroundColor = this._backgroundColor;
298300
}
299301

300302
createNativeView() {

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,20 @@ class UIPageViewControllerImpl extends UIPageViewController {
9090
}
9191

9292
tabBar.delegate = this.tabBarDelegate = MDCTabBarDelegateImpl.initWithOwner(new WeakRef(owner));
93-
tabBar.tintColor = UIColor.blueColor;
94-
tabBar.barTintColor = UIColor.whiteColor;
95-
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
96-
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected);
93+
94+
if (majorVersion <= 12) {
95+
tabBar.tintColor = UIColor.blueColor;
96+
tabBar.barTintColor = UIColor.whiteColor;
97+
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
98+
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected);
99+
} else {
100+
tabBar.tintColor = UIColor.systemBlueColor;
101+
tabBar.barTintColor = UIColor.systemBackgroundColor;
102+
tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Normal);
103+
tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarItemState.Selected);
104+
tabBar.inkColor = UIColor.clearColor;
105+
}
106+
97107
tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
98108
tabBar.alignment = MDCTabBarAlignment.Leading;
99109
tabBar.sizeToFit();

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,14 @@ import {
55
textTransformProperty, letterSpacingProperty, colorProperty, fontInternalProperty, lineHeightProperty,
66
FormattedString, Span, Color, isBold, resetSymbol
77
} from "./text-base-common";
8-
import { isString } from "../../utils/types";
98

109
export * from "./text-base-common";
1110

11+
import { isString } from "../../utils/types";
12+
import { ios } from "../../utils/utils";
13+
14+
const majorVersion = ios.MajorVersion;
15+
1216
export class TextBase extends TextBaseCommon {
1317

1418
public nativeViewProtected: UITextField | UITextView | UILabel | UIButton;
@@ -194,8 +198,12 @@ export class TextBase extends TextBaseCommon {
194198
dict.set(NSParagraphStyleAttributeName, paragraphStyle);
195199
}
196200

197-
if (style.color && (dict.size > 0 || isTextView)) {
198-
dict.set(NSForegroundColorAttributeName, style.color.ios);
201+
if (dict.size > 0 || isTextView) {
202+
if (style.color) {
203+
dict.set(NSForegroundColorAttributeName, style.color.ios);
204+
} else if (majorVersion >= 13) {
205+
dict.set(NSForegroundColorAttributeName, UIColor.labelColor);
206+
}
199207
}
200208

201209
const text = this.text;

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ import {
88
CSSType
99
} from "../editable-text-base";
1010

11+
export * from "../editable-text-base";
12+
1113
import { profile } from "../../profiling";
14+
import { ios } from "../../utils/utils";
1215

13-
export * from "../editable-text-base";
16+
const majorVersion = ios.MajorVersion;
1417

1518
class UITextViewDelegateImpl extends NSObject implements UITextViewDelegate {
1619
public static ObjCProtocols = [UITextViewDelegate];
@@ -113,6 +116,9 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
113116
private _isShowingHint: boolean;
114117
public _isEditing: boolean;
115118

119+
private _hintColor = majorVersion <= 12 ? UIColor.blackColor.colorWithAlphaComponent(0.22) : UIColor.placeholderTextColor;
120+
private _textColor = majorVersion <= 12 ? null : UIColor.labelColor;
121+
116122
createNativeView() {
117123
const textView = NoScrollAnimationUITextView.new();
118124
if (!textView.font) {
@@ -173,7 +179,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
173179
// Use semi-transparent version of color for back-compatibility
174180
this.nativeTextViewProtected.textColor = color.ios.colorWithAlphaComponent(0.22);
175181
} else {
176-
this.nativeTextViewProtected.textColor = UIColor.blackColor.colorWithAlphaComponent(0.22);
182+
this.nativeTextViewProtected.textColor = this._hintColor;
177183
}
178184
} else {
179185
const color = this.style.color;
@@ -182,8 +188,8 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
182188
this.nativeTextViewProtected.textColor = color.ios;
183189
this.nativeTextViewProtected.tintColor = color.ios;
184190
} else {
185-
this.nativeTextViewProtected.textColor = null;
186-
this.nativeTextViewProtected.tintColor = null;
191+
this.nativeTextViewProtected.textColor = this._textColor;
192+
this.nativeTextViewProtected.tintColor = this._textColor;
187193
}
188194
}
189195
}

0 commit comments

Comments
 (0)