Flat Style theme. How?

I wish to use a flat style theme on my app. How to add a theme style like these? Which is the better compatible with ionic?


1 Like

You can customize the scss files that come with ionic by following our tutorial.

This way, you can write your own theme to fit your own needs.

Can I start from someone of them? Is there a theme that we can use from a starting point or can we use css overloading?

Your best bet is to go look through the scss files, mostly the _variables.scss file. This has all the variables that set up most of the color classes.


This should get you started. A quick and easy way to start is to copy a preexisting color variable and modify it to your needs.

Thanks. Is there a guideline to sass compiling? I’ve never used it.

Check out the scss website.


For example.
Do I need to use only CSS or I need to import js file too if I want use some UI CSS kit like UIKit ( http://www.getuikit.com/ ) or other like BootFlat ( http://bootflat.github.io/documentation.html Bootstrape based )?

That is my simple question is: How to start Ionic app theming from an UI Kit or framework?

Remember, Ionic is just HTML,CSS, and JS. If you have particular styles that you want to incorporate into ionic, then you can write some css and create your own classes. Think customizing bootstrap. If you have a build process, you can incorporate ionic’s scss files and go from there.

Ok…In the next days , I’ll post some screen…but I need to understand how I use sass

If you’re creating project using the ionic CLI, you should have scss file already included. There you can write your own styles and theme then run gulp sass or gulp watch to compile the scss into css

Frankly, I wish there was an Android theme - Ionic apps look like iOS 7 apps on an Android device. Android needs some love too. Ideally there would be a per-platform option to swap out themes when an app is built.


Something that we are actually working on.
Less of theme-appearance thing, but changing things like animations, tabs appearance, nav-bar title align, etc

Your link does not work

Which link, http://sass-lang.com/ ?

Perhaps http://learn.ionicframework.com/formulas/working-with-sass/ ?

Try this project I created: https://github.com/matheusrocha89/ionic-flat-colors