René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Add CSS classes to root views to target platform/device/orientation/modals","articleBody":"**Describe the solution you'd like**\r\nThis came up as a request from @bundyo based on the re-work of the NativeScript theme. The idea is to add a CSS class to the root view of the application for specific states. This would allow much more flexible theming and styling. Here is a list for the app root view:\r\n\r\n- default\r\n  - .ns-root\r\n- platform\r\n  - .ns-ios\r\n  - .ns-android\r\n- device type\r\n  - .ns-phone\r\n  - .ns-tablet\r\n- orientation\r\n  - .ns-portrait\r\n  - .ns-landscape\r\n- os theme mode (optional)\r\n  - .ns-os-dark or .ns-dark\r\n  - .ns-os-light or .ns-light\r\n\r\nWe should also add a class to the root view of any modal view\r\n- default\r\n  - .ns-modal\r\n\r\n**Describe alternatives you've considered**\r\nThe alternative, which was used until now, is to have state specific files, e.g. app.android.css, app.ios.css, app.land.css. The problem with these is they can't be chained, there are no device type specific and modal ones (and don't work with webpack).\r\n\r\n**Additional Info**\r\nCSS Color Adjustment Module for Browsers (regarding dark/light mode in OS) - https://www.w3.org/TR/css-color-adjust-1/\r\n\r\n\u003cbountysource-plugin\u003e\r\n\r\n---\r\nWant to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/75104912-add-css-classes-to-root-views-to-target-platform-device-orientation-modals?utm_campaign=plugin\u0026utm_content=tracker%2F12908224\u0026utm_medium=issues\u0026utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin\u0026utm_content=tracker%2F12908224\u0026utm_medium=issues\u0026utm_source=github).\r\n\u003c/bountysource-plugin\u003e","author":{"url":"https://github.com/MartoYankov","@type":"Person","name":"MartoYankov"},"datePublished":"2019-06-05T12:34:07.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":11},"url":"https://github.com/7313/NativeScript/issues/7313"}