Nativescript ExtendedInfo plugin.




* tns plugin add @nativescript-community/css-theme
Be sure to run a new build after adding plugins to avoid any issues.
The theme will style your application using Element selectors - you don't need to add CSS classes on every element you
need to style.
``javascript`
import "@nativescript-community/css-theme";
This JS takes care of updating several classes on the app root elements, something that got
included in @nativescript/core in {N} 6.1.
Setting the theme mode from light to dark is now easier - instead of loading a new file, just find the root view and
set .ns-dark class to it - this will change all colorization to dark tones. For instance, if your page root is
RadSideDrawer, just add a class to it, like this:
`html`
...
If your root is a frame, you can do this
`html`
For Angular, if your root is a page-router-outlet, you can set the .ns-dark class on it - it will pass it down to the
Frame it renders.
Setting the theme mode from JavaScript is also much easier now - just import the theme and call Theme.setMode() with
your preferred mode - either Theme.Light or Theme.Dark, like this:
`javascript
import Theme from "@nativescript-community/css-theme";
Theme.setMode(Theme.Dark); // Or Theme.Light
`
Keep in mind that in {N} 6.2 these changes will override the default system mode. To
restore it, use Theme.Auto (available since Theme 2.3.0):
`javascript
import Theme from "@nativescript-community/css-theme";
Theme.setMode(Theme.Auto);
`
Additionally there is another helper method - toggleMode, which can be used without parameters to just toggle the mode
or with a boolean parameter to ensure light or dark mode is set:
`javascript
import Theme from "@nativescript-community/css-theme";
Theme.toggleDarkMode(); // to toggle between the modes
// or
Theme.toggleDarkMode(true); // to ensure dark mode
Theme.toggleDarkMode(false); // to ensure light mode
`
##### A note of warning
Due to limitation in Playground the JS Theme API cannot be imported like an ES6 module in a TS/Angular projects. You'll
have to resort to requiring it:
`javascript
const Theme = require("@nativescript-community/css-theme");
Theme.setMode(Theme.Dark); // Or Theme.Light
`
In addition to .ns-light and .ns-dark classes, the theme's little JavaScript file introduces .ns-root on the root element,.ns-android/.ns-ios depending on the current platform (which the theme extensively uses) and additionally.ns-portrait/.ns-landscape and .ns-phone/.ns-tablet, which should be self-explanatory..ns-portrait/.ns-landscape
Of course get updated on orientation change, so you can use it to show a two pane layout
in landscape, for instance.
There are several functions and mixins in the core theme, that can be used in your projects, as long as you're using
SASS/SCSS.
If you need to access specific theme variables like simple colors or sizes, do it through the const function:
`scss`
Button {
background-color: const(forest);
height: const(btn-height);
}
You can get light/dark colors:
`scss
Button {
color: light(primary);
.ns-dark & {
color: dark(primary);
}
}
``