Style your app automatically with Onsen UI

[Fran Diox]

As we mentioned in a previous post, we just released a new killer feature called automatic styling for Onsen UI 2.0. This feature allows you to style your app for both iOS and Android automatically with little to no effort.

Click here to see the original article

[anandpatwari31]

Good Job. Really liked the example. I tried in Feb with my Angular app and facing issue. I would love to see an angular example as well.
Thinking of migrating my app in Onsen 2.0

[mbespin]

I’m new to Onsen, and just playing with samples in order to get familiar.

I’ve updated the files in folder lib to the current version (2.5.1). I’m getting the following errors:
Uncaught (in promise) Error: You must supply an “ons-page” element to “ons-navigator”.
at HTMLElement._verifyPageElement (index.js:877)
at prepare (index.js:525)
at index.js:544
at page-loader.js:73
at page-loader.js:26
at <anonymous>

I read the documentation, and I didn’t notice anything wrong with the of this sample.

It is possible to update this sample to the current version?

[Fran Diox]

@mbespin I just updated this app to 2.5.1. Check again master branch :+1:

[mbespin]

@fran-diox: Perfect ! Thanks

[Cipher7]

Hey Fran, Greenhorn here :_), are you telling me, if I want to change the color of the title bar or floating action button of my Onsen App, I need to go learn how to use GULP? I look at a GULP tut on youtube it looks pretty scary!

[munsterlander]

@Cipher7 No need for that. You can override the CSS styles without recompiling a whole new theme.

[Fran Diox]

@Cipher7 Not at all, to generate a whole new theme you just need to use a preconfigured gulp, not creating the configuration your self. gulp serve and gulp build commands are enough. If you only want to change a few things from the default theme, you can also override CSS rules in your app instead of creating a new theme.

[Cipher7]

@Fran-Diox Is there a reference guide I can use for overriding default theme colors? In my case I want to override the title bar and FAB from the default material (green) color to a dark blue, what would that override look like? Thanks in advance.

[Fran Diox]

@Cipher7 In the CSS components reference you can see all the used classes. Take the one you want and change any property. You can check the DOM as well. If you have more questions, please open a new thread.