Unable to use the theme-core css

[realtebo]

I just created a fresh new app, is ALL unchanged from the template

I added to app.component.ts @Component this

styleUrls : [ 'app.css' ],

And now I cannot run the app

JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR
JS: ns-renderer: File /data/data/org.nativescript.mynsapp/files/app/nativescript-theme-core/css/core.light.css does not exist. Resolved from: nativescript-theme-core/css/core.light.css.

My app.css file is the default:

/*
In NativeScript, the app.css file is where you place CSS rules that
you would like to apply to your entire application. Check out
http://docs.nativescript.org/ui/styling for a full list of the CSS
selectors and properties you can use to style UI components.

/*
For example, the following CSS rule changes the font size of all UI
components that have the btn class name.
*/
.btn {
    font-size: 18;
}

/*
In many cases you may want to use the NativeScript core theme instead
of writing your own CSS rules. For a full list of class names in the theme
refer to http://docs.nativescript.org/ui/theme.
*/
@import 'nativescript-theme-core/css/core.light.css';

And, of course, I've already executed

npm install
tns platform add android
tns run android

What's the right way to use provided css files? I don't see any differences from what stated here: http://docs.nativescript.org/ui/theme

[NathanWalker]

Run this: 'tns --version' Please let us know what version that says.

[realtebo]

I restart from scratch

node -v
v7.2.1

npm -v
3.10.10

tns info
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 2.4.2           │ 2.4.2          │ Up to date    │
│ tns-core-modules │ 2.4.2           │ 2.4.2          │ Up to date    │
│ tns-android      │ 2.4.1           │ 2.4.1          │ Up to date    │
│ tns-ios          │                 │ 2.4.0          │ Not installed │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

I create a blank project

tns create theme-test-app --ng
cd theme-test-app
tns platform add android

First execution, without any modification, works and show me this

Next, to try a different theme, I do these changes:

1. Into app.css: I change @import 'nativescript-theme-core/css/core.light.css'; into @import 'nativescript-theme-core/css/purple.css';

2. Into app.component.ts, in the @Component decorator config, I add styleUrls: [ 'app.css' ],

Then tns run android again

I tried to remove the css explicit declaration from the component and the re-run

// styleUrls: [ 'app.css' ],

The app runs, but the purple theme is not applied

What am I doing wrong?

[NickIliev]

Hey @realtebo Keep in mind that you do not have to provide styleUrls: [ 'app.css' ] in your app.component.ts as the styles from app.css will be globally applied by default. In fact adding the styleUrls is causing your application to throw with your error.

After some research I found out that the default hello-world app is a bit misleading when applying a color theme because it is not generating many elements apart from the button. You purple theme is loading as expected but in order to see the actual change try to apply some additional elements. For example, you can manually add ActionBar (the default one in Android is not styled) like this:

app.component.html

<ActionBar title="Title" icon="" class="action-bar">
</ActionBar>

<StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center"></Label>
    <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
    <Label [text]="message" class="h2 text-center" textWrap="true"></Label>
</StackLayout>

and then with the purple theme in your app.css

@import 'nativescript-theme-core/css/purple.css';

the result is:

[NickIliev]

@realtebo see the updated info above ^^^

[realtebo]

Yes, I can confirm that is working adding explicit action bar and removing the explicit inclusion of app.css, thanks

I was expecting that button would be purple in the purple theme, lol.

Actually, I'm playing (succesfully) with SASS, so I'll fix every colors. Close, if you want.

[NathanWalker]

You can also refer to this image for how each colored theme will look (actionbar + button): http://docs.nativescript.org/img/theme/color-schemes-all.png

If you have a subscription to egghead.io, this SASS video specifically details working with the core theme: https://egghead.io/lessons/angular-2-create-a-custom-app-theme-using-sass-for-nativescript

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.