Open
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.