Change bottom navigation bar color

Ionic Framework
1

When I’m changing my app theme to dark, the theme of bottom navigation bar (where overview, home and back buttons are present) remains light i.e. background is still white with black icons. It would be better If we are able to style the bottom navigation bar just like StatusBar of our device.

2 Likes
2

Do you have these lines in your variables.scss file?

// iOS Dark Theme
.ios body {
–ion-toolbar-background: #0d0d0d;
}
/*

  • Material Design Dark Theme

*/

.md body {
–ion-toolbar-background: #1f1f1f;

}

3

Yes I have these lines in my variable.scss.

4

Have you applied the color property for ion-header or ion-toolbar to the page which is not taking dark colors?

p.s. Do you have any repo?

5

@ArinaAmir you didn’t got me. I wanna style Bottom Navigation Bar (where overview, home and back button is present). Its at the bottom of your phone’s screen.

6

Wouldn’t you have to have this discussion with the phone makers?

1 Like
7

@rapropos Stop using those old school phones.

1 Like
8

@mayankkataria Well said. I was facing the same issue. Though we can change the hardware navbar’s background color from native code which you can check from here but till now ionic doesn’t seems to provide any functionality for achieving it.

1 Like
9

I’m facing the same issue. Is there any workaround for it?

10

Thanks for suggestion but no need to change the native code. You can change the navbar’s color using this plugin. Kindly check this SO question for reference.