nativescript-themes

A NativeScript plugin to deal with dynamically loading UI Themes

Installation

NativeScript 2.x

tns plugin add [email protected]

NativeScript 5.x

tns plugin add nativescript-themes

Status:

This plugin works in NativeScript 2.x and 5.x. It does NOT work in v3 or v4.

License

This is released under the MIT License, meaning you are free to include this in any type of program

Sample Snapshot

Usage

To use the module you just require() it:

var themes = require('nativescript-themes');

Setup in App

Modify your startup app.js

var themes = require('nativescript-themes');
themes.applyTheme(themes.getAppliedTheme('red-theme.css'));

This will automatically apply the "red-theme.css" theme if no other theme has ever been chosen as the default theme.

You can also load a theme bundled by webpack using applyThemeCss:

var themes = require('nativescript-themes');
var cssText = require('~/assets/themes/dark.scss');
themes.applyThemeCss(cssText, 'dark.scss');

You ask, how exactly does this help?

This allows you to dynamically theme an application just by calling the theme system. Your master app.css file is applied first, then the theme file and finally your page.css

red-theme.css

button {
    background-color: red;
}

green-theme.css

button {
    background-color: green;
}

Demo

Demo shows three sample themes, and shows how to load the last chosen theme at startup.

Why use this?

This allows you to apply a specific theme file globally so all pages get it.

themes.applyTheme('cssFile', options);

options.noSave = true, this will cause it not to save this info for the getAppliedTheme to retrieve, this would typically used if you needed temporarily apply a theme.

var themes = require('nativescript-themes');
themes.applyTheme('red-theme.css');

theme.getAppliedTheme(<default_theme>);

This returns the last theme applied; if no theme has been applied it will use the default_theme.

var themes = require('nativescript-themes');
var currentTheme = themes.getAppliedTheme('red-theme.css');
if (currentTheme === 'red-theme.css') {
    console.log('We are using the default red-theme!');
} else {
    console.log('We are using', currentTheme);
}

themes.applyThemeCss('textCss', 'filename');

This function receives a string containing CSS and applies it. The filename is only for reference (no file will be actually loaded).

var themes = require('nativescript-themes');
themes.applyThemeCss('page {background-color: black;}', 'default-theme.css');

Tutorials

Need some extra help getting started? Check out these tutorials for dealing with NativeScript UI themes in an iOS and Android application.

• Changing the UI Theme in a NativeScript Angular Application

Contributors:

• Brad Martin
• Tiago Alves