O'Reilly logo

TypeScript Blueprints by Ivo Gabe de Wolff

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling the app

The app can be styled using CSS. Not all CSS properties are supported, but basic settings like fonts, colors, margin, and padding work. We can add a stylesheet in the app adding the following code before application.start():

application.cssFile = "style.css"; 

We will change the style of the following parts of the app:

In app/style.css, we will first give the ActionBar a background color:

ActionBar { 
  background-color: #237691; 
  color: #fefefe; 
} 

Tip

The stylesheet must be added in the app folder, instead of src. NativeScript will only load files inside app. TypeScript files are compiled into that folder, but the stylesheet should already be located there.

We will add some margin to the labels in the list and details page:

Label { margin: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required