Theme Ionic 2 Application - Customize and modify default theme layer of ionic application

Ionic is built on top of Sass, which allows us to set some default styles. SASS is nothing but a "CSS preprocessor" which is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Some examples of CSS preprocessor include: Sass, LESS etc.

Adding a dynamic generated CSS(Cascading Style Sheet) to the AngularJS view with example.

A dynamic generated CSS (Cascading Style Sheet) at the controller can be bind to the HTML View using ng-bind-html attribute with in the style tag. This example uses angular-sanitize.js which removes the dangerous token from the dynamically generated style string. It uses the ng-keyup AngularJS HTML attribute to update the background colour value on KeyUp event. The values inside the text-box taken as the background colour value.