WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Colors


Ionic framework offers . a collection of 9 predefined color categories.



Ionic Color Classes


The following table shows the default set of 9 colours provided by Ionic.
This tutorial we'll study colours for styling completely different Ionic parts during this tutorial.
Let's check all the colours as shown below

Class Description Result
light To be used for white color
stable
To be used for light-weight gray color
positive
To be used for blue color
calm
To be used for light-weight blue color
balanced
To be used for inexperienced color
energized
To be used for yellow color
assertive
To be used for red color
royal
To be used for violet color
dark
To be used for black color



Ionic Color Usage


Ionic Color Usage completely different categories for every component.Suppose a header component can have bar category and a button can have a button category.
For example, to form a inexperienced color header, we'll use a bar-calm as follows
category="result notranslate">

...



Same as produce a yellow color button, we'll use button-stable category as follows.
category="result notranslate">

...



You can additionally use Ionic color category like all alternative CSS category. we'll currently vogue 2 paragraphs with a inexperienced associated an yellow color.

category="result notranslate">

Paragraph one...


category = "yellow">Paragraph two...




Customizing colours with CSS


When you wish to vary a number of the Ionic default colours victimization CSS, you'll bang by writing the lib/css/ionic.css file.
this approach isn't terribly productive as a result of each component (header, button, footer...) uses its own categories for styling.if you would like to vary the colour of the "light" category to orange, you'd got to search through all the weather that use this category and alter it.

Customizing colours victimization SASS


SASS (which is that the short style ofcode as a Service) provides a better thanks to amendment the colour for all the weather promptly.
C:\Users\Username\Desktop\tutorialApp> ionic setup sass

But you'll amendment default colours by gap the scss/ionic.app.scss file so typewriting within the following code before this line – @import "www/lib/ionic/scss/ionic";



Now, if you employ the subsequent example


category="result notranslate">

Paragraph one...


category = "yellow">Paragraph two...



Important Note


The www/css/style.css file are aloof from the header of the index.html when you put in SASS.
<link href = "css/style.css" rel = "stylesheet">