如何更改 Ionic 2 中导航栏的背景颜色？

Posted 2023-03-31

【中文标题】如何更改 Ionic 2 中导航栏的背景颜色？

【英文标题】：How do I change the background color of the navbar in Ionic 2?

【发布时间】：2015-12-04 07:21:48

【问题描述】：

我正在尝试更改 Ionic 2 中的导航栏背景颜色。我尝试了很多东西，例如 class="bar bar-stable" 等

现在我的代码如下所示：

<ion-navbar  *navbar> 

所以背景目前是灰色的（默认）

【参考方案1】：

从 ionic 2 开始，您可以在 src/theme/variables.scss 文件中添加自定义样式

然后在你想要的地方添加类

现在看看结果

参考：Theming your Ionic App

【讨论】：

这很好，但需要在所有 ion-nav 标签上加上color="custom-color"。

下面@veljkoz的回答是比较方便的。

【参考方案2】：

导航栏有自己的风格。所以你需要覆盖它。

.toolbar-background 
  background-color: #0c60ee;

【讨论】：

这应该是这个问题的正确答案。

这是有效的，但是当我尝试它时正在改变工具栏的文本颜色。

放这个最好的地方是什么？

【参考方案3】：

对于离子 2：try this

在 ionic 1 中你可以这样做。 看这里：Ionic header

其他方式

css：

.theme-color 
background-color: ##009688 !important;
color: #ffffff;

html:

   <ion-nav-bar class="theme-color"><ion-nav-bar>

希望这对你有帮助。

【参考方案4】：

现在 (rc4) 正确的方法是更改​​ /src/themes/variables.scss 文件，并添加：

$toolbar-background: blue;

这有效地改变了使用该值的任何地方的颜色。更多信息here

【讨论】：

其实toolbar还有很多其他属性，比如$toolbar-background $toolbar-border-color $toolbar-text-color $toolbar-active-color $toolbar-inactive-color

【参考方案5】：

这行得通：

<ion-navbar secondary *navbar>

app/theme目录下的app.variables.scss中有一些预定义的变量：

 $colors: (
    primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      favorite:   #69BB7B
    );

我从以下文章中了解到这一点：A Guide to Styling an Ionic2 Application。

【参考方案6】：

我通过在导航栏中使用如下颜色属性来找到标题的解决方案：

<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>

对于侧边菜单工具栏背景，转到 variables.scss 文件并添加以下代码：

$toolbar-background: $primary;

【参考方案7】：

<ion-nav-bar primary></ion-nav-bar>

也可以是次要的等，或者来自scss的其他颜色。

【讨论】：

谢谢丹，非常感谢！

【参考方案8】：

不幸的是，这似乎不再适用于最新版本的 Ionic2（截至 2016 年 10 月 25 日 - ionic -version = 2.1.4），在 package.json 中有以下依赖项：

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",

为了解决这个问题，我不得不将以下内容添加到app.scss：

.toolbar-background 
  background-color: blue;