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.
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:
<drawer:RadSideDrawer class="ns-dark" xmlns:drawer="nativescript-ui-sidedrawer">
...
</drawer:RadSideDrawer>
If your root is a frame, you can do this
<Frame class="ns-dark" defaultPage="root"></Frame>
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:
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):
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:
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
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:
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.
Of course .ns-portrait/.ns-landscape
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:
Button {
background-color: const(forest);
height: const(btn-height);
}
You can get light/dark colors:
Button {
color: light(primary);
.ns-dark & {
color: dark(primary);
}
}