I have an Ionic 4 application, using a side menu, where I my title bar is set to my primary color, and so on iOS I cannot see my side menu button.
On Android, the button is white so I can see it. I have tried every element selector I can see, I just can’t get the menu button to show white…
I have in the markup…
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item *ngFor="let p of availablePages"
button=true lines='none' (click)="openPage(p)"
[class.selected-item]= "p.isCurrentPage">
<ion-avatar slot='start'>
<img class='menu-icon' src='{{p.menuImage}}'>
</ion-avatar>
<div>{{p.title}}</div>
</ion-item>
and in the scss…
.menu-icon {
padding:10px !important;
border-radius: 0 !important;
color:white !important;
}
ion-menu-button{
--color:white !important;
color:white !important;
}
ion-menu-buttons{
--color:white !important;
color:white !important;
}
.ios-button{
color:white !important;
}
But will just not show white.
Does anyone have any idea how I can set this?
Thanks in advance
Since you have changed the primary color, did you also update the other CSS variables around your modification? Specifically --ion-color-primary-contrast and --ion-color-primary-contrast-rgb?
Yes @ChrisGriff, I used the Ionic theme generator, which has actually set the --ion-color-primary-contrast* to black, which I don’t see either.
So, I have the following…
/** primary **/
--ion-color-primary: #FAA634;
--ion-color-primary-rgb: 250,166,52;
--ion-color-primary-contrast: #000000;
--ion-color-primary-contrast-rgb: 0,0,0;
--ion-color-primary-shade: #dc922e;
--ion-color-primary-tint: #fbaf48;
If I look in the dev tools, I can see the buttons color is set to --ion-color-primary. IF I check this off in the dev tools, then it becomes white. Just need to know how to tell it to not use the primary color…
For Android, I can set the color as follows…
ion-toolbar{
--background : var(--ion-color-primary);
--color : var(--ion-color-light);
}
The button picks up the `--color` above, if I remove this, it becomes black
In dev tools (for Android), the color is set to inherit.
Back to ios theme, if I set the color of button to white, then I get the color I need. I tried setting it to inherit as for the Android theme, but it does not work here. Only setting it to white, which is fine, but it just does not work when I set it in my scss…
You have something overriding a variable somewhere in your styles. There is something that you are setting, that is being picked up elsewhere.
Without seeing everything, it is hard to say where this is happening. My suggestion would be to comment out all your custom css, then add back in portions at a time. Don’t assume anything, keep the additional small.
<ion-toolbar color="dark" >
<button ion-button (click)="menuopen()" menuToggle left style="color:#cfb27c"> <ion-icon name="menu" ></ion-icon></button>
</ion-toolbar>
Yes, it is the
ion-toolbar{
--background : var(--ion-color-primary);
}
Thats does it.
I created a new blank Ionic project, using the side menu template, and it initially looks like this…
I then add the above style (as I want my header the primary color), and then the icon is invisible…
Hi don’t (currently) have my own button in there, we have (in the new blank project, which is what I have without the split pane)…
<ion-app>
<ion-split-pane>
<ion-menu style='color:white'>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle style='color:white' auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
<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 main></ion-router-outlet>
</ion-split-pane>
</ion-app>
As above, I tried putting the style on the ion-menu and the ion-menu-toggle but did not work.
Have also tried
ion-menu{
--color:white;
}
ion-menu-toggle{
--color:white;
}
But no difference either.
You don’t need to change the css of the ion-toolbar, instead just set the color attribute on the template tag
<ion-toolbar color="primary">
Then when you change the colors that define your primary, all should be good.
1 Like
Thanks for that! I can now finally achieve what I am after doing this!
It does means I have to add the color="primary" to the toolbar in every page , rather than just the one place as before, but that is no big deal, it that’s what we need to do.
Once I have done that, and remove the styles on the ion-toolbar, the menu color picks up the --ion-color-primary-contrast, so I set this to white and I have what I was after
And this seemed to sall still work for Android styles.
Thanks heaps for the help!
You can get the effect you want using styles like this in app.scss:
ion-toolbar {
--background: var(--ion-color-primary);
--color: var(--ion-color-primary-contrast);
}
ion-toolbar ion-menu-button {
color: var(--ion-color-primary-contrast);
}
2 Likes
I had to modify this slightly for the latest version.
Added to globals.scss below the ionic import statements:
ion-toolbar {
--background: var(--ion-color-primary);
--color: var(--ion-color-primary-contrast);
}
ion-toolbar ion-menu-button {
color: var(--ion-color-primary-contrast);
}
ion-toolbar ion-back-button {
color: var(--ion-color-primary-contrast) !important;
}
ion-toolbar ion-button {
color: var(--ion-color-primary-contrast);
}
This fixed my menu, back, and regular buttons in the toolbar. Beats updating/adding the color to every html file
1 Like