Access :host css variables from inside split-pane

Ionic Framework Ionic Angular
1

Hello,

I’ve set the css variables for the ionic theme, it is loaded by my main style.scss :

:root {
  --ion-color-primary: #25a;
  //... some other colors
}

I can access --ion-color-primary from the app until the “ion-split-pane” tag but not inside its childs (“ion-menu” and “ion-router-outlet”). You can see that in the following screens

Capture d’écran 2020-12-07 à 12.55.56
Capture d’écran 2020-12-07 à 12.55.562678×1462 1.07 MB

Capture d’écran 2020-12-07 à 12.56.01
Capture d’écran 2020-12-07 à 12.56.012678×1462 583 KB

The drawer component :

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
       APP ICON
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-split-pane contentId="menu-content" class="split-pane">
    <ion-menu type="overlay" contentId="menu-content">
        <ion-header>
            <ion-list>
                <ion-item lines="none">
                <ion-avatar slot="start" *ngIf="(user$ | async)?.getGravatar()">
                    <img [src]="(user$ | async)?.getGravatar()" alias="Photo de l'utilisateur courant">
                </ion-avatar>
                <ion-label>
                    <h3>{{ (user$ | async)?.nice_name }}</h3>
                    <p>
                        {{ (user$ | async)?.role() }}
                        <span *ngIf="(user$ | async)?.points || (user$ | async)?.points === 0">- {{ (user$ | async)?.points }} points</span>
                    </p>
                </ion-label>
                </ion-item>
            </ion-list>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-menu-toggle auto-hide="false" *ngFor="let p of menuItems">
                    <ion-item (click)="p.click()" lines="full">
                        <ion-icon slot="start" [name]="p.icon"></ion-icon>
                        <ion-label>
                            {{ p.title }}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
            </ion-list>
        </ion-content>
    </ion-menu>
    <ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-split-pane>

Do you have any clue please?

2

I’ve “resolved” it by setting the variable for the “ion-split-pane” tag in my global “variables.scss” file :

:root, ion-split-pane {
  --ion-color-primary: #25a;
  //... some other colors
}

That seems odd to me. Do you think it’s the right way to do this please ?

1 Like