Changing A NativeScript CSS Skin At Runtime

CSS is usually a subject I avoid due to me being artistically illiterate, but recently a student of mine asked me an interesting question regarding theming an Angular NativeScript application with dynamic CSS files loaded at runtime. Given the nature of Angular, it becomes difficult to load files at runtime because of how Angular compiles and builds projects. NativeScript Angular projects are no exception when it comes to switching a CSS skin.

So what if we want to apply a set of CSS styles on demand, but keep them separated in their own files?

We’re going to see how to switch between files to apply a CSS skin to a NativeScript Angular application on demand at runtime.

To make things easy to understand we’re going to start with a fresh project. From the Command Prompt (Windows) or Terminal (Linux and Mac), execute the following commands:

tns create SkinProject --ng
cd SkinProject
tns platform add ios
tns platform add android

The --ng flag in the above indicates that we are creating an Angular TypeScript project. Although I’m adding the iOS build platform, we cannot actually build for iOS unless we’re using a Mac.

To make switching CSS files at runtime possible, we need to use the nativescript-themes plugin by Nathanael Anderson. Execute the following to install the plugin into your project:

tns plugin add nativescript-themes

This plugin is not to be confused with the NativeScript theme that is provided to you at project creation where that is a single theme, not a theme switcher plugin.

Defining our CSS Themes

Before we jump into our application logic and UI, let’s define various CSS themes that can be switched between at application runtime.

Create an app/red-theme.css file and include the following CSS:

ActionBar {
    background-color: #B20000;
    color: #FFFFFF;
}

.btn-primary {
    background-color: #FF9999;
    color: #000000;
}

You can see in the above CSS file that there isn’t anything too complex. Remember, this is only an example. Essentially we’re going to change the color of the application action bar and the color of the buttons to shades of red.

Now create an app/blue-theme.css file and include the following CSS:

ActionBar {
    background-color: #0000B2;
    color: #FFFFFF;
}

.btn-primary {
    background-color: #B2DFEE;
    color: #000000;
}

The above file contains the same CSS, but different colors. This time we’re using shades of blue. For simplicity we’re only going to be switching between two CSS skins.

Adding the TypeScript Logic for Applying a CSS Skin

With the skin files in place, we need a way to apply them via our Angular TypeScript code. Open the project’s app/app.component.ts file and include the following TypeScript code:

import { Component } from "@angular/core";
var Themes = require("nativescript-themes");

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public theme: string;

    public constructor() {
        this.theme = "red";
        Themes.applyTheme(Themes.getAppliedTheme("red-theme.css"));
    }

    public applyBlueTheme() {
        this.theme = "blue";
        Themes.applyTheme("blue-theme.css");
    }

    public applyRedTheme() {
        this.theme = "red";
        Themes.applyTheme("red-theme.css");
    }

}

To keep things easy to understand, let’s break down what is happening in the above code.

import { Component } from "@angular/core";
var Themes = require("nativescript-themes");

We start things off by importing a standard Angular component as well as our installed nativescript-themes plugin.

The constructor method is where we define the starting CSS skin:

public constructor() {
    this.theme = "red";
    Themes.applyTheme(Themes.getAppliedTheme("red-theme.css"));
}

As you can see in the above code, we’re starting with the app/red-theme.css file if no other theme was already selected as the default theme.

The applyBlueTheme and applyRedTheme accomplish pretty much the same things:

public applyBlueTheme() {
    this.theme = "blue";
    Themes.applyTheme("blue-theme.css");
}

Each of the two methods applies either the app/blue-theme.css or app/red-theme.css files without checking for a default theme.

So what does the UI behind this TypeScript look like?

Creating the Application UI

The UI behind this application is going to be short and sweet. We are going to have an action bar with two buttons. When the theme changes, so will the colors of the action bar and the two buttons.

Open the project’s app/app.component.html file and include the following HTML markup:

<ActionBar title="CSS Project"></ActionBar>
<StackLayout>
    <Button text="Blue Theme" (tap)="applyBlueTheme()" class="btn btn-primary"></Button>
    <Button text="Red Theme" (tap)="applyRedTheme()" class="btn btn-primary"></Button>
    <Label text="The `{{ theme }}` theme is active!" class="footnote text-center"></Label>
</StackLayout>

The tap events trigger each of the methods for switching between theme colors.

Conclusion

You just saw how to change CSS skins at application runtime in a NativeScript Angular Android and iOS mobile application. This is useful if you want to your users to select a theme or maybe you want to apply a day-time theme and a night-time theme, sort of how navigation systems work in your car. In that scenario you would have better visibility as needed. Too many scenarios to list where this would be beneficial.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.