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: 10px; }
The main page is now properly styled, as shown in the following screenshot:
We can also style the label on the detail page, which we gave a class name. We make the text in the label bigger...