Global classes don't work on iOS 12

[james-criscuolo]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.0.10
• Cross-platform modules:
• Android Runtime:
• iOS Runtime: 6.5.3
• Plugin(s):

Describe the bug
iOS 12 does not include global classes, and previous hack to fix no longer works with Nativescript 7

To Reproduce
Load a simulator with ios 12, styles that are only shown when global classes (like .ns-root) are present will not appear. This was also the case prior to Nativescript 7, but including Theme.toggleMode(false); in my main file would fix it.
Expected behavior
Global styles work as expected. Even restoring the hack would be useful.

Sample project
I can put something together if possible, but hope the issue is clear enough that this isn't needed. Was going to start with the demo for this app, but it has not been updated for {N} 7 yet, so its a big larger of endeavor that I can not tackle today.

Additional context

[james-criscuolo]

Yes, my app.scss file has every style classed within the global classes, like

// css specificity for whole app overrides
.ns-root {
&.ns-ios, &.ns-android {
&.ns-light, &.ns-dark {
&.ns-phone, &.ns-tablet {
&.ns-landscape, &.ns-portrait {

While the above set is unnecessary, I use a block like that, with just ns-android removed for ios, and vice-versa for android.

When I initially switched from theme V1 to theme V2, we got reports of theses styles not showing on iOS 12. Upon investigation, I found that the global classes were not there, but Theme.toggleMode(false); would add them (and be a no-op on Android, as we aren't paying attention to dark vs. light (yet)). I am using the latest core (7.0.11) and only theme version that builds with nativescript 7 (3.0.0). I tried reverting back to my previous working theme version (2.3.3) for testing, but could not with nativescript 7.

[james-criscuolo]

I was able to recreate from a commandline test project

 ~  ns -v
7.0.10

 ~  ns create                                                                                                                                                                                                               

# Let’s create a NativeScript app!

Answer the following questions to help us build the right app for you. (Note: you
can skip this prompt next time using the --template option, or the --ng, --react, --vue, --ts, or --js flags.)

? First, what will be the name of your app? testtheme

? Next, which style of NativeScript project would you like to use: Angular

? Finally, which template would you like to start from: SideDrawer

From here:

• update @nativescript/theme to 3.0.0
• ns clean
• open _app-common.scss and wrap everything except imports with the block i have above:

// imports
.ns-root {
&.ns-ios, &.ns-android {
&.ns-light, &.ns-dark {
&.ns-phone, &.ns-tablet {
&.ns-landscape, &.ns-portrait {
// contents
}}}}}

• ns run ios

I then have two simulators, one is an ipad running ios 14, this one, the styles look as expected. I then have an iphone 6 running ios 12 (12.4, i believe it's latest), on this one, the icons are missing and the styles don't look as expected.

[james-criscuolo]

Turns out I could update my hack and get this to work again

-Theme.toggleMode(false);
+Application.on(Application.displayedEvent, () => {
+  Theme.toggleMode(false);
+});

The only class missing is ns-light (or nd-dark), so that will fix it.