Javascript 在ionic 5中更改底部导航栏的颜色

我无法更改应用程序底部导航栏的颜色。当我将我的应用程序主题更改为黑色时，底部导航栏（其中有概览、主页和后退按钮）的主题保持为浅，即背景仍为白色，带有黑色图标。如何在ionic中设置底部导航栏的样式？ 这是我更改应用程序主题的

changeTheme（）

方法代码：

changeTheme() {
    this.darkTheme = !this.darkTheme;
    if (this.darkTheme) {
      // Change app theme
      document.body.setAttribute('theme-color', 'dark');
      // Change StatusBar theme
      StatusBar.setBackgroundColor({ color: 'black' });
      StatusBar.setStyle({style: StatusBarStyle.Dark});
      // How to change Bottom Navigation Bar theme?
    } else {
      // Change app theme
      document.body.setAttribute('theme-color', 'light');
      // Change StatusBar theme
      StatusBar.setBackgroundColor({ color: 'white' });
      StatusBar.setStyle({style: StatusBarStyle.Light});
      // How to change Bottom Navigation Bar theme?
    }
  }

---

我知道有人问过这个问题。但该解决方案在爱奥尼亚的最新版本中不起作用。

最初的答案由@SnowBases over给出

步骤：

使用npm i cordova插件navigationbar color安装cordova插件navigationbar color插件

记住在

platform.ready（）之后实现这个插件

实施：

要解决错误，请

找不到名称“NavigationBar”

将NavigationBar声明为类外的全局属性，如下所示：

---

使用此插件：@najamusaqib此插件用于设置状态栏而不是导航栏的样式。我已经在代码中设置了状态栏的样式，我想更改导航栏的样式。@Mayank Kataria你看到我的答案了吗？我一直在使用导航栏cordova插件，它一直正常工作到现在。您只需要使用window.NavigationBar.backgroundColorByHexString（“#FF0000”）或在中声明一个全局变量（NavigationBar）Angular@SnowBases是的，我试过了，现在效果很好。谢谢！！

changeTheme() {
    // StatusBar.setOverlaysWebView({overlay: true});
    this.darkTheme = !this.darkTheme;
    if (this.darkTheme) {
      // Change app theme
      document.body.setAttribute('theme-color', 'dark');
      // Change StatusBar theme
      StatusBar.setBackgroundColor({ color: 'black' });
      StatusBar.setStyle({ style: StatusBarStyle.Dark });
      // Change NavigationBar theme
      NavigationBar.backgroundColorByName('black', false);
    } else {
      // Change app theme
      document.body.setAttribute('theme-color', 'light');
      // Change StatusBar theme
      StatusBar.setBackgroundColor({ color: 'white' });
      StatusBar.setStyle({ style: StatusBarStyle.Light });
      // Change NavigationBar theme
      NavigationBar.backgroundColorByName('white', true);
    }
  }

declare const NavigationBar: any;