Style NativeScript views using the default core 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.