Need help with ionic header

I’m very new to ionic and just started learning it. I’ve spend a whole day looking for how to change color of ionic header (Top Title) and I’ve tried everything but I am not able to change the color (Very new to ionic)

Have installed cordova, ionic and other dependencies. I’m trying this code in pages/home.html

<ion-header>
    <ion-navbar>
       <ion-title>
          <div class = "bar bar-header bar-positive">
              <button class = "button icon ion-navicon"></button>
              <h1 class = "title">Header Buttons</h1>
              <button class = "button icon ion-home"></button>
           </div>
           
           <div class = "bar bar-subheader bar-assertive">
              <h2 class = "title">Sub Header</h2>
           </div>         
          </ion-title>      
      </ion-navbar>
  </ion-header>

I just see two big bars and no style is being applied… like color. Do I need to install some plugin to make this work? I’m trying to create a header and a subheader but seems I’m missing something very obvious… Pls assist.

I edited this Stackblitz Project a Little. In home.html You can see my changes.
I added a <ion-toolbar> as a subheader. Colors were added by using the color property.
You can set the Colors in your themes/variables.scss

Hope it helps. Try to make Things simple, if you can’t so, you’re properly doing sth wrong :smiley:. That’s what I learned so far.

Here is a quick sample of doing this:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
  <ion-toolbar>
    <ion-title class="subheader">I'm a subheader</ion-title>
  </ion-toolbar>
</ion-header>

and the SASS

page-home {
    .toolbar-title {
        color: rebeccapurple;
    }

    .subheader .toolbar-title {
        color: goldenrod;
    }
}