Learn how to style your app whether it's with standard CSS or with SASS. Also learn how to take full advantage of the default core theme to create your own custom themes.

Let’s learn how to style those native views with CSS and understand a few things that are unique to the native platforms regarding styling. A good majority of standard web CSS properties are supported with the addition of a few like `horizontal-align` that are unique to native platforms.

nativescript

Style NativeScript views using CSS

The default core theme comes preinstalled and ready to go with every new project. Learn how to use some of the many helpful utility classes that are provided like common `btn` classes for Buttons, `h1`, `h2`, etc. Label classes and convenient `p-10` or `m-10` (shorthand margin/padding) classes ranging from 0 - 30. You can learn all about the rich options you get here: http://docs.nativescript.org/ui/theme

Style NativeScript views using the default core theme

Learn how to extend the SASS that ships with the nativescript-theme-core plugin to create your very own custom app theme. The setup takes advantage of common styling across iOS and Android as well as how to handle platform specific css. You can find a full list of SASS variables that can be overridden here: https://github.com/NativeScript/theme/blob/master/app/scss/_variables.scss You can also find a full list of baseline variable sets to base custom stylesheets within this section on the docs: http://docs.nativescript.org/ui/theme#color-schemes 

Create a custom app theme using SASS for NativeScript

Learn how to programmatically change the status bar text color on iOS and Android as well as the background color. The lesson also covers how to adjust the text color to be dark on Android in cases where the status bar color may be light.

Modify status bar colors on iOS and Android with NativeScript

Learn how use the nativescript-themes plugin to swap out entire stylesheets on the fly to provide theme switching for your app's users. Also covers how to ensure your app remembers which theme the user chose last before the app closed to apply their preferred theme next time they open it.

NativeScript for Angular Styling Tips/Tricks

Nathan Walker

Course Content