Repository navigation
.ns-dark doesn't apply through to dialogs #8484
Description
Environment
From play.nativescript.org:
{
"@angular/animations": "8.2.14",
"@angular/common": "8.2.14",
"@angular/compiler": "8.2.14",
"@angular/core": "8.2.14",
"@angular/forms": "8.2.14",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "8.2.14",
"@angular/router": "8.2.14",
"@nativescript/angular": "8.21.0",
"@nativescript/core": "6.5.0",
"@nativescript/theme": "2.3.3",
"@progress-nativechat/nativescript-nativechat": "3.0.0",
"kinvey-nativescript-sdk": "4.2.5",
"nativescript-accelerometer": "3.0.0",
"nativescript-angular": "8.21.0",
"nativescript-background-http": "4.2.1",
"nativescript-camera": "4.5.0",
"nativescript-geolocation": "5.1.0",
"nativescript-image": "3.0.1",
"nativescript-imagepicker": "7.1.0",
"nativescript-intl": "3.0.0",
"nativescript-iqkeyboardmanager": "1.5.1",
"nativescript-social-share": "1.6.0",
"nativescript-theme-core": "1.0.6",
"nativescript-ui-autocomplete": "6.0.1",
"nativescript-ui-calendar": "6.1.0",
"nativescript-ui-chart": "7.1.1",
"nativescript-ui-dataform": "6.0.0",
"nativescript-ui-gauge": "6.0.0",
"nativescript-ui-listview": "8.0.1",
"nativescript-ui-sidedrawer": "8.0.0",
"nativescript-vue": "2.5.0",
"react": "16.13.0",
"react-hot-loader": "4.12.20",
"react-nativescript": "0.18.0",
"reflect-metadata": "0.1.13",
"rxjs": "6.5.4",
"rxjs-compat": "6.5.4",
"svelte": "3.20.1",
"svelte-native": "0.8.1",
"tns-core-modules": "6.5.0",
"zone.js": "0.10.2"
}Describe the bug
Launching a dialog from @nativescript/core/ui/dialogs pulls the colour from Button, but constructs one globally without attaching it to any context, so any extra styles are not applied appropriately. This includes component-local .css definitions for Button, but more importantly (for my use case), the app.css .ns-dark Button definition doesn't get used when the user is in dark mode.
Keep in mind that the Button that is used for style extraction is only ever constructed once, too, which would disable the ability to switch back and forth between dark and light even if the style were properly composed at instantiation.
To Reproduce
Add two styles:
Button {
color: #ff0000;
}
.ns-dark Button {
color: #00ff00;
}Expected behavior
When in Dark Mode, the buttons on a dialog should be green (in the example).
Sample project
https://play.nativescript.org/?template=play-ng&id=Uklyzp
Activity
NickIliev commentedon Apr 1, 2020
@facetious confirming that at this very moment the dark mode styles are not applied for dialogs. Marking the issue as a bug. However, resolving this know limitation is not trivial and is related to this feature.