Override Ionic Header with custom color

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.

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.

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

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.