How to dynamically change the color of the sidebar navigation

Ionic Framework ionic-v3
1

I have the following use case:
I have both a sidebar and a navbar in my ionic application.

in my page components I can easily access and edit the navbar like this:

<ion-header>
  <ion-navbar color="my-color-defined-in-variables.css" no-border-bottom>
  <ion-navbar>
</ion-header>

every page has its own template that can overwrite color of this navbar easily simply by changing the ion-navbar color attribute in the template of the page.
This works perfectly fine.
My problem is that my project also uses a sidebar which is defined in app.template.html (therefore it is outside of the scope of the page’s template):

  <ion-menu>
        <ion-header>
            <ion-toolbar id="mainLeftToolBar" color="i-can-set-this-color-also-with-an-initial-scss-variable-but-i-want-to-change-it-afterwards" >
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header> 
  </ion-menu>

Now when I change the navbar color in my page components only the top navbar changes (which is in the scope of the component) but the sidebar stays the same (because it is defined in app.template.html).
How can I also change the sidebar color from within my page components?
I tried the following:


@Component({
  selector: 'test',
  templateUrl: testhtml'
})
export class SomePage {


  private _elem: HTMLElement;

  @ViewChild('mainLeftToolBar') sideBarHeader: ElementRef;
  constructor(
    public eref: ElementRef
  )
  {
     this._elem = eref.nativeElement;
  }


  ionViewDidLoad() {
    let sideBarHeader = this.sideBarHeader.nativeElement;
    console.log('page loaded this is my sidebar: ', sideBarHeader);
  }
}

But the sideBarHeader variable is undefined, and I assume that is because I am using @ViewChild incorrectly.
My question is:
How can I change the sidebar color dynamically from within my page component?
How can I access and manipulate the sidebar dom element from within my page component?

I hope the question is clear, thank you everybody in advance for your time and help!

2

In case it is useful for anybody, I found one possible solution:
in the sidebar which is defined in app.template.html:
i bind the color like this:

[color]="getNavBarColor()"

getNavBarColor is defined in app.component.ts and analyzes the current url of the app and returns the name of a color variable that is defined in variables.scss.

<ion-header>
            <ion-toolbar id="mainLeftToolBar" [color]="getNavBarColor()">
                <ion-title>Menu</ion-title>
            </ion-toolbar>
</ion-header>