Theme switching light <-> dark mode not working correctly on IOS in NS Angular project

[cjohn001]

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: 8.1.0
• Cross-platform modules: "@nativescript/core": "~8.1.2",
• iOS Runtime: JSC
• Plugin(s): "@nativescript/theme": "~3.0.1"

Describe the bug When switching between dark and light mode The new theme is not applied correctly. It looks like pages in the history of the navigation stack do not get the new styles applied. When I navigate back in the page history the styles are partly from the old theme. When I than navigate forward again, the new theme styles are applied correctly.

In my _app-common.scss file I assign the styles as follows:

.mnd .text-field-grey {
    color: $dark-grey-text-color;
    background-color: $light-grey-color;
}
.ns-dark .mnd .text-field-grey {
    color: $very-light-grey-color;
    background-color: $medium-dark-grey-color;
}

and in the component specific scss files, I am using the following syntax:

.mnd .searchbar-bg {
    background-color: white;
}
.ns-root.ns-dark :host .mnd .searchbar-bg {
    background-color: $dark-mode-light-grey-blue;
}

[Archez]

I ran into this with my app. Basically what I found is that every element on the page receives either a .ns-dark or a .ns-light class. When navigating back (after having switched modes), the elements retain the old class but the root element is correctly updated.

What I ended up doing was having to make all my css selectors for .ns-dark to also use .ns-root or .ns-modal (or both, depending on my elements). The original css selector traverses the element tree until it finds the first element with the .ns-dark class. Now the only .ns-dark that is selected has to be the root element one, and not any of the child page elements that are old/outdated. (.ns-modal is not under the .ns-root so you need to have a separate selector of elements in a modal view)

// before
.ns-dark .some-class {
  //
}
---
// after
.ns-root.ns-dark .some-class,
.ns-modal.ns-dark .some-class {
  //
}