diff --git a/nativescript-core/application/application.ios.ts b/nativescript-core/application/application.ios.ts index 4f7a6a4f5..06c5a37a9 100644 --- a/nativescript-core/application/application.ios.ts +++ b/nativescript-core/application/application.ios.ts @@ -22,8 +22,7 @@ import { Builder } from "../ui/builder"; import { CLASS_PREFIX, getRootViewCssClasses, - pushToRootViewCssClasses, - resetRootViewCssClasses + pushToRootViewCssClasses } from "../css/system-classes"; import { ios as iosView, View } from "../ui/core/view"; @@ -308,7 +307,7 @@ class IOSApplication implements IOSApplicationDefinition { this._window.makeKeyAndVisible(); } - setupRootViewCssClasses(rootView); + setRootViewSystemAppearanceCssClass(rootView); rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => { const userInterfaceStyle = controller.traitCollection.userInterfaceStyle; const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle); @@ -356,6 +355,8 @@ function createRootView(v?: View) { } } + setRootViewCssClasses(rootView); + return rootView; } @@ -398,7 +399,7 @@ export function _start(entry?: string | NavigationEntry) { // Mind root view CSS classes in future work // on embedding NativeScript applications - setupRootViewCssClasses(rootView); + setRootViewSystemAppearanceCssClass(rootView); rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => { const userInterfaceStyle = controller.traitCollection.userInterfaceStyle; const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle); @@ -482,22 +483,24 @@ function setViewControllerView(view: View): void { } } -function setupRootViewCssClasses(rootView: View): void { - resetRootViewCssClasses(); - +function setRootViewCssClasses(rootView: View): void { const deviceType = device.deviceType.toLowerCase(); 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)); } +function setRootViewSystemAppearanceCssClass(rootView: View): void { + if (majorVersion >= 13) { + const systemAppearanceCssClass = `${CLASS_PREFIX}${iosApp.systemAppearance}`; + pushToRootViewCssClasses(systemAppearanceCssClass); + rootView.cssClasses.add(systemAppearanceCssClass); + } +} + export function orientation(): "portrait" | "landscape" | "unknown" { return iosApp.orientation; } diff --git a/nativescript-core/css/system-classes.d.ts b/nativescript-core/css/system-classes.d.ts index 740854fec..cbef8e46d 100644 --- a/nativescript-core/css/system-classes.d.ts +++ b/nativescript-core/css/system-classes.d.ts @@ -28,8 +28,3 @@ export function pushToRootViewCssClasses(value: string): number; * @param value */ export function removeFromRootViewCssClasses(value: string): string; - -/** - * Resets CSS classes for root view. - */ -export function resetRootViewCssClasses(): string[]; diff --git a/nativescript-core/css/system-classes.ts b/nativescript-core/css/system-classes.ts index de763e55b..6e2f7e80c 100644 --- a/nativescript-core/css/system-classes.ts +++ b/nativescript-core/css/system-classes.ts @@ -30,8 +30,3 @@ export function removeFromRootViewCssClasses(value: string): string { return removedElement; } - -export function resetRootViewCssClasses(): string[] { - // Preserve the default `ns-root` CSS class - return rootViewCssClasses.splice(1); -}