Repository navigation
Theme switching light <-> dark mode not working correctly on IOS in NS Angular project #296
Description
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;
}
Activity
Archez commentedon Sep 28, 2021
I ran into this with my app.
Basically what I found is that every element on the page receives either a
.ns-darkor a.ns-lightclass. 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-darkto also use.ns-rootor.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-darkclass. Now the only.ns-darkthat is selected has to be the root element one, and not any of the child page elements that are old/outdated. (.ns-modalis not under the.ns-rootso you need to have a separate selector of elements in a modal view)