Repository navigation
At least on iOS, some CSS styles are not applied without .ns-dark / .ns-light ; e.g. bg-danger is not applied to Buttons in dark mode. #8594
Description
Environment
% tns info
✔ Component nativescript has 6.5.0 version and is up to date.
✔ Component tns-core-modules has 6.5.1 version and is up to date.
✔ Component tns-android has 6.5.0 version and is up to date.
✔ Component tns-ios has 6.5.0 version and is up to date.
Using an iOS 13 emulator.
Describe the bug
Applying bg-danger to a Button does not make the button red when the phone is in dark mode.
Some CSS attributes seems to require having .ns-dark or .ns-light, e.g. border-width or border-color. Otherwise nothing is applied.
To Reproduce
app-common.scss
// Uncommenting the following fixes the `bg-danger` problem
// .ns-dark .bg-danger {
// background-color: const(error);
// opacity: 1;
// }
.border-color {
border-width: 2px 2px 2px 2px;
border-color: green;
}
.ns-light .border-color2,
.ns-light .border-color3,
.ns-dark .border-color2,
.ns-dark .border-color3 {
border-width: 2px 2px 2px 2px;
border-color: green;
}
.border-color3 {
border-radius: 20px;
}
home.component.html
<StackLayout>
<Label class="bg-danger" text="Expecting bg-danger: OK with labels!"></Label>
<Button class="bg-danger" text="Expecting bg-danger: only in light mode"></Button>
<Button class="border-color" text="Expecting green borders: never"></Button>
<Button class="border-color2" text="But OK if ns-dark/light specified"></Button>
<Button class="border-color3" text="Note that border-radius works as expected!"></Button>
</StackLayout>
Expected behavior
CSS being applied without .ns-dark, .ns-light specifiers.
Sample project
I've done this. (Question: is it possible to test it within an emulator without downloading the project?) After downloading it and running it, the bg-danger problem is still here and the border problems are a bit different, but the version used seems to be 6.5.0 instead of 6.5.1.
Activity
NickIliev commentedon May 22, 2020
@boutier the PLayground demo uses
@nativescript/themewhich is changing the specificity of some applied CSS styles.Remove the theme (or consider the applied CSS specificity) and your styles should be applied as expected
boutier commentedon May 22, 2020
Actually, I do have these two imports (since I use
bg-danger). I had"@nativescript/theme": "~2.2.0",but passing to2.3.3doesn't change anything.Note that here is what I have with the playground.
It's not much better:
.border-color { … }without.ns-dark/.ns-lightdo color the border (which is expected),.ns-light .border-color2 { … }do not color the borders anymore. Neither in dark nor light modes.NathanWalker commentedon Oct 23, 2026
Closing as theme behavior, as noted above:
@nativescript/themescopes many rules under.ns-dark/.ns-light, which raises their specificity, so unscoped app rules lose. Match the theme's specificity, or skip the theme. Dark/light classes now also reach dialogs (#10201).