Title: Wrong Dialog colors on android in dark mode and no way to handle dark/light mode · Issue #9462 · NativeScript/NativeScript · GitHub
Open Graph Title: Wrong Dialog colors on android in dark mode and no way to handle dark/light mode · Issue #9462 · NativeScript/NativeScript
X Title: Wrong Dialog colors on android in dark mode and no way to handle dark/light mode · Issue #9462 · NativeScript/NativeScript
Description: Environment nativescript: 8.0.2 @nativescript/core: 8.0.8 @nativescript/android: 8.0.0 @nativescript/ios: 8.0.0 Describe the bug Could not set label and button colors for Dialogs via css (to handle dark mode colors) To Reproduce run: ns ...
Open Graph Description: Environment nativescript: 8.0.2 @nativescript/core: 8.0.8 @nativescript/android: 8.0.0 @nativescript/ios: 8.0.0 Describe the bug Could not set label and button colors for Dialogs via css (to handle...
X Description: Environment nativescript: 8.0.2 @nativescript/core: 8.0.8 @nativescript/android: 8.0.0 @nativescript/ios: 8.0.0 Describe the bug Could not set label and button colors for Dialogs via css (to handle...
Opengraph URL: https://github.com/NativeScript/NativeScript/issues/9462
X: @github
Domain: github.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Wrong Dialog colors on android in dark mode and no way to handle dark/light mode","articleBody":"**Environment**\r\n - nativescript: 8.0.2\r\n - @nativescript/core: 8.0.8\r\n - @nativescript/android: 8.0.0\r\n - @nativescript/ios: 8.0.0\r\n\r\n**Describe the bug**\r\nCould not set label and button colors for `Dialogs` via `css` (to handle dark mode colors)\r\n\r\n**To Reproduce**\r\n- run: `ns create ...`\r\n- add somewhere a `Dialog.alert('Hi')`\r\n- replace the scss as followed:\r\n```scss\r\nPage {\r\n Label,\r\n Button {\r\n color: gray;\r\n }\r\n\r\n \u0026.ns-dark {\r\n Label,\r\n Button {\r\n color: white;\r\n }\r\n }\r\n \u0026.ns-light {\r\n Label,\r\n Button {\r\n color: black;\r\n }\r\n }\r\n}\r\n\r\nLabel,\r\nButton {\r\n color: blue;\r\n\r\n \u0026.ns-dark {\r\n color: yellow;\r\n }\r\n \u0026.ns-light {\r\n color: green;\r\n }\r\n}\r\n```\r\n\r\n***Result on Android***\r\n\r\n\r\n***Result on iOS***\r\n\r\n\r\n\r\n**Expected behavior**\r\n- in light mode, the `Dialogs` text and button colors should be `black` or `green` in light mode and `white` or `yellow` in dark mode\r\n- without dark/light mode support they shloud be `gray` or `blue`;\r\n\r\n**Sample project**\r\nPlayground is useless, because it it's last version runs on NS 6.5 (released a year ago).\r\n\r\n**Additional context**\r\n- the [`lbl`](https://github.com/NativeScript/NativeScript/blob/master/packages/core/ui/dialogs/dialogs-common.ts#L299) and [`btn`](https://github.com/NativeScript/NativeScript/blob/master/packages/core/ui/dialogs/dialogs-common.ts#L281) have no `page` or `parentNode`, so the css selectors `Page Label` and `Page Button` fail (described here: https://github.com/NativeScript/NativeScript/issues/3830#issuecomment-547349025)\r\n- the [`lbl`](https://github.com/NativeScript/NativeScript/blob/master/packages/core/ui/dialogs/dialogs-common.ts#L299) and [`btn`](https://github.com/NativeScript/NativeScript/blob/master/packages/core/ui/dialogs/dialogs-common.ts#L281) have no `ns-light` or `ns-dark` css-class, so there is no possibility to set different colors via css.\r\n- on android and ios the color property of [`lbl`](https://github.com/NativeScript/NativeScript/blob/master/packages/core/ui/dialogs/dialogs-common.ts#L299) and [`btn`](https://github.com/NativeScript/NativeScript/blob/master/packages/core/ui/dialogs/dialogs-common.ts#L281) is:\r\n```js\r\ncolor: {\r\n _argb: 4278190335\r\n _name: \"blue\"\r\n a: 255\r\n android: -16776961\r\n argb: 4278190335\r\n b: 255\r\n g: 0\r\n hex: \"#0000FF\"\r\n ios: undefined\r\n name: \"blue\"\r\n r: 0\r\n}\r\n```\r\nthere are a some existing issues about this problem, wich are opend over moths, like:\r\nhttps://github.com/NativeScript/NativeScript/issues/8484\r\nhttps://github.com/NativeScript/theme/issues/184\r\n\r\n**Summarized:**\r\n- no chance to apply custom colors for dark mode on both platforms (this is realy bad -\u003e dialogs are not usable in dark mode)\r\n- on android in dark mode gets generated \"magically\" a custom color (but at least is a bit lighter and could be used in dark mode)\r\n- If I'm not wrong, this issue could not be solved, by css (and `@nativescript/theme`)\r\n","author":{"url":"https://github.com/wendt88","@type":"Person","name":"wendt88"},"datePublished":"2021-07-05T10:08:34.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2},"url":"https://github.com/9462/NativeScript/issues/9462"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:f4ee2d88-00dc-e077-c563-db398a566d29 |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | CC1C:23324C:632CDD:83B7E3:6A5FCFAB |
| html-safe-nonce | 2f72958e5c07a63323664f54cdd66fdddac503345056cd23cfc187fdbeed2289 |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJDQzFDOjIzMzI0Qzo2MzJDREQ6ODNCN0UzOjZBNUZDRkFCIiwidmlzaXRvcl9pZCI6Ijg3MDg5MTI1MTUwOTgwNzA5NTUiLCJyZWdpb25fZWRnZSI6ImlhZCIsInJlZ2lvbl9yZW5kZXIiOiJpYWQifQ== |
| visitor-hmac | 2de5429ce4c91104dd8e0769ca8b7e6e2a40de9451211818889d8e0a104fa190 |
| hovercard-subject-tag | issue:936926526 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/NativeScript/NativeScript/9462/issue_layout |
| twitter:image | https://opengraph.githubassets.com/3da95674c3b979068978cebd9fb966e0b52a83cfef5b8669754e7eb387e208ca/NativeScript/NativeScript/issues/9462 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/3da95674c3b979068978cebd9fb966e0b52a83cfef5b8669754e7eb387e208ca/NativeScript/NativeScript/issues/9462 |
| og:image:alt | Environment nativescript: 8.0.2 @nativescript/core: 8.0.8 @nativescript/android: 8.0.0 @nativescript/ios: 8.0.0 Describe the bug Could not set label and button colors for Dialogs via css (to handle... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | wendt88 |
| hostname | github.com |
| expected-hostname | github.com |
| None | 53a28a7799cbf673993ab89fc44869fea4c4a6545a861a4d1445e83e8d03aabd |
| turbo-cache-control | no-preview |
| go-import | github.com/NativeScript/NativeScript git https://github.com/NativeScript/NativeScript.git |
| octolytics-dimension-user_id | 7392261 |
| octolytics-dimension-user_login | NativeScript |
| octolytics-dimension-repository_id | 31492490 |
| octolytics-dimension-repository_nwo | NativeScript/NativeScript |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 31492490 |
| octolytics-dimension-repository_network_root_nwo | NativeScript/NativeScript |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | dc08399f879d576f0edbb8c52a0a1a30d498b203 |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width