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

It is easy to customize and modify theme layer of ionic application, while we still follow the standards of each platform. Theming Ionic apps are easier than ever. Ionic is built on top of SASS, which allows us to set some default styles for your app it is to change the defaults SASS styles in ionic. 

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. SASS (Syntactically Awesome StyleSheets) is an extension of CSS. It allows us to create variables, nested rules, inline imports and more. We can keep things organized and it is faster to create stylesheets.

Note: I have a fresh ionic 2 project running with a side menu template

Navigate to the /src/themes/variables.scss file from the root of the project

$colors: (
  primary:    #347eff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

These are Named Color Variables. It makes easy to reuse colors on various components. We can change the default colors to match your app's branding. Ionic uses the primary color by default for buttons and other components. We can customize and add custom color variables to the Named Color Variables in ionic.

$colors: (
  primary:    #347eff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  error:      #e55555, // Custom Color Varialbe
);

Here the custom color variable is "error". We can use it using the attriblute "color" in the HTML.

color="error" // use this with the HTML

asdasd.PNG

Output:

customize and modify theme layer of ionic aasd.png

We can even customize the custom color variable with a base and contrast property. Base: is nothing but background color for elements and Contrast: is for the text color.

$colors: (
  primary:    #347eff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  error:      #e55555,
  message:(
    base: #f4eb42,
    contrast: #000,
  ), // custom color with base and contrast property.
);

To make use of the components that you added to the custom color variable use color function. Add this in the .SCSS file.

background: color($colors, message, base); // equivalent to background: #f4eb42

123.png

// File 1: src/theme/variables.scss - line no: 26 override the $colors variable
 
$colors: (
  primary:    #347eff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  error:      #e55555,
  message:(
    base: #f4eb42,
    contrast: #000,
  ),
);
 
// File 1: src/pages/page1/page1.scss - add the following lines
 
p {
    background: color($colors, message, base);
    padding: 10px;
}
 
// File 1: src/pages/page1/page1.html - add the following lines
 
  <p>
    Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at
    sem. Curabitur arcu erat, accumsan id impeVestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus
    magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet
    elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit.
  </p>
 
 
  <p>
    Quisque velit nisi, pretium utallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt
    nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit.
  </p>
 
 
  <p>
    Quisque velit nisi, pre convallis at tellus. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt
    nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit.
  </p>
 
  <button ion-button color="error">Report Error</button>
Category: