9

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

现在我的代码如下所示：

<ion-navbar  *navbar>

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

4

8 回答 8

9

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

在此处输入图像描述

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

在此处输入图像描述

在此处输入图像描述

现在看看结果

在此处输入图像描述

参考：主题化你的 Ionic 应用程序

于 2016-11-18T06:37:31.530 回答
7

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

.toolbar-background {
  background-color: #0c60ee;
}
于 2016-04-29T12:19:07.953 回答
4

对于 Ionic 2：试试这个

在 ionic 1 中，你可以这样做。看这里：离子标头

另一种方式

CSS：

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

html:

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

希望这对你有帮助。

于 2015-12-04T08:31:32.080 回答
3

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

$toolbar-background: blue;

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

于 2017-01-15T23:24:01.007 回答
1

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

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

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

$toolbar-background: $primary;
于 2018-01-27T19:15:42.313 回答
1

这有效：

<ion-navbar secondary *navbar>

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

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

我从以下文章中了解到这一点：Ionic2 应用程序样式指南。

于 2016-02-11T13:15:02.353 回答
0

不幸的是，这似乎不再适用于最新版本的 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;
}
于 2016-10-27T03:04:24.127 回答
0 
<ion-nav-bar primary></ion-nav-bar>

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

于 2016-04-29T13:51:07.200 回答