Style NativeScript views using CSS

Style NativeScript views using the default core theme

Create a custom app theme using SASS for NativeScript

Modify status bar colors on iOS and Android with NativeScript

Use the nativescript-themes plugin to switch app themes on the fly

NativeScript for Angular Styling Tips/Tricks

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

[00:01] The CSS you get out of the box with a new project gives you two directions to go. You can great your own classing structure, or build on top of the core theme that is installed by default.

[00:11] Let's look at what this core theme has to offer. In our view template right off the bat, you'll see some classes here just to give you a hint. P20, if we remove that, is what's actually providing the padding around this main view here.

[00:24] There are padding and margin classes that range from zero up to 30 going by five increments. We could say P5 and that would actually give us a padding of five. We could also use margin and 20, and that would give us a margin of 20 around that container. We could also just provide margin left of 20 or margin right.

[00:48] These utility classes exist for padding and margin as a nice simple convenience. There are also the heading classes ranging from h1 all the way up to h5. Then, there's the text left and text right and text center classes. There's also a collection of button styles much like Bootstrap. In addition to button primary, there's button outline.

[01:12] If we go back to button primary here, this button active class is what gives it that slight color change when you tap on the button. You can see that present here on Android.

[01:23] If we remove that button active class, you can see that it will retain the standard highlight behavior for the platform with, of course, its unique characteristic. On Android, you get the wave effect, and on iOS the default tap highlight behavior.

[01:38] There's a couple extra utility classes like button rounded, SM for small, or LG for large. You can see that retains the same look on Android. A couple handy classes exist for dividers like HR light and HR dark. We can add some margin to the top and bottom by using margin Y10. That will apply 10 margin to the top and to the bottom of that divider.

[02:10] In addition to the light theme, there is also a dark theme. You'll notice that when applied by default, you'll get the dark theme applied to your action bar, and of course, your page is still white.

[02:21] You'll want to be using the page class on your root element layout container to actually get that applied to your whole page. Notice our HR dark divider is hidden, we could use the HR light class here.

Course

NativeScript for Angular Styling Tips/Tricks

Style NativeScript views using the default core theme

Share this video with your friends