Describe the solution you'd like
This 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:

• default
  • .ns-root
• platform
  • .ns-ios
  • .ns-android
• device type
  • .ns-phone
  • .ns-tablet
• orientation
  • .ns-portrait
  • .ns-landscape
• os theme mode (optional)
  • .ns-os-dark or .ns-dark
  • .ns-os-light or .ns-light

We should also add a class to the root view of any modal view

• default
  • .ns-modal

Describe alternatives you've considered
The 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).

Additional Info
CSS Color Adjustment Module for Browsers (regarding dark/light mode in OS) - https://www.w3.org/TR/css-color-adjust-1/

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.