Theming and styling Ionic 2 apps

Ionic provides a simple theming system which uses SASS variables and cutsom CSS classes/styles to change components styling .
Go to src/theme/variables.scss, you can see many predefined Ionic 2 sass variables such as :

If to use any color inside $colors use the color attribute of the component with the name of the variable . For example .

We can also provide our own custom color names .

To apply custom SCSS styles you have two options :

  • For global styles you can use src/app/app.scss
  • For page specific styles you can use src/pages/xxxx/xxxx.scss files

Hide or disable ion-content scrollbar

Make sure to add this CSS styles in src/app/app.scss

Same way you can style your ionic app with your own Custom Styles

Leave a Reply

Your email address will not be published. Required fields are marked *