Theme only applied to main page?


#1

I’m working with themes and noticed that only the main page is styled. At least, on both Android and iOS the action bar remains white on all child pages. Do I need to import the theme into each page’s .css file? That would seem to go against what app.css is intended to do.


#2

Whatever you define in app.css should be common across app. A good proof is the default templates in Playground.


#3

What’s the preferred method of showing sample code? I created a two-page Hello World project that demonstrates the problem.


#4

Playground is the preferred way, if you think it is reproduced only in your local project try uploading that to Github and share the link.


#5

Here’s a link to the sample app on GitHub: https://github.com/dlcole/themetest

I use the blue theme. Main page has blue action bar, child page has white.

And, here’s a playground, showing the same behavior.


#6

@dlcole
Problem solved
link: https://play.nativescript.org/?template=play-js&id=7FnLQK&v=2

You forgot to add the class action-bar on the action bar element.

You need to add the appropriate class names to get the default styling

available class names are in the Docs
https://docs.nativescript.org/ui/theme#class-names


#7

Doh! I figured it was probably something simple like that. Yes, it works as expected now. Thanks for the catch!