Override Ionic Header with Custom Color

Question

Can I customize the title color with ionic? By custom, I mean using a custom color, not one of the bar-something that are defined. I tried this but it does not work

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

and in CSS:

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

Here is the pen code

I can't seem to change the blue color.

Answer 1

An easy fix is ​​to use:

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

This will override the current css set.

I think it’s more advisable to add it to the stylesheet than in the html itself, since it is easier to develop, modify and unnecessarily bloat

Answer 2

You can do this with SASS. If you have not entered the terminal

 $ ionic setup sass 

Then you can use 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 the CSS pre-processor for Ionic, they have a great library with all the variables for you.

Answer 3

Since you first run the ionic sass configuration as indicated in the answers, you need to find and identify the variable that you want to override in the _variables.css file, and you will override them in ionic.app.scss .

For bar-resistant color, I am in _variable.scss:

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

And override in ionic.app.scss with:

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

It works.

Answer 4

add this line to your style. css in the directory / www / css

 .title.title-center.header-item { background-color:#F38023!important; // for bg color margin:0px!important; margin-left:0px!important; color: #ffffff!important; width: 100%; } 

Answer 5

Override this Ionic Sass variable in /variables.scss topics

 $toolbar-background:#FFFFFF; 

Here you can find another list of Ionic Sass variables:

Answer 6

Override this Ionic Sass variable in /variables.scss topics

 $toolbar-title: #fff;