Override Ionic Header with custom color

Question

Is it possible to customize the color of a header with ionic ? By custom, I mean using a custom color and not one of the bar-something that are defined. I've tried this, but it doesn't seem to work

<ion-nav-bar class="bar-positive custom-dark">
</ion-nav-bar>

and in CSS:

 .custom-dark{
 color : #30393A;
 }

Here is a codePen

I don't seem to be able to change the blue color.

Answer 1

You can do this with SASS. If you haven't already type into terminal

$ ionic setup sass

You can then use the overrides inside the scss/ directory.

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;

I highly recommend using a CSS pre-processor for Ionic, they have a great lib with everything in variables for you.

Answer 2

An easy fix is to use:

 .custom-dark{
    color : #30393A !important; // text
    background-color:blue!important; // for bg color
 }

This will overide the current css set..

I think its more appropriate to add to style sheet than in the html itself , as its easier for development , modifying and unnecessary bloating

Answer 3

Since you have first run ionic setup sass as mentioned in the answers, you need to search and identify the variable you want override on the file _variables.css and them you will override in ionic.app.scss.

For the bar-stable color i do find into _variable.scss :

$bar-stable-text: $button-stable-text !default; 

And override in ionic.app.scss with:

$bar-stable-text:                 #FFFFFF !default;

This works.