Wie ändere ich die Hintergrundfarbe der Navigationsleiste in Ionic 2?

Question

Ich versuche, die navbar Hintergrundfarbe in Ionic zu ändern 2. Ich habe viele Dinge ausprobiert, wie class = "bar bar stabil" etc

Im Moment sieht mein Code wie folgt aus:

<ion-navbar *navbar> 

So ist

der Hintergrund zur Zeit grau (Standard)

Answer 1

Für Ionic 2: try this

in ionischen 1 u auf diese Weise tun können. Blick hier: Ionic header

andere Art und Weise

css:

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

html:

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

hoffen, dass diese für Sie hilfreich.

Answer 2

Dies funktioniert:

<ion-navbar secondary *navbar> 

Es gibt einige vordefinierte Variablen in app.variables.scss im app/Themenverzeichnis:

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

Ich dachte, dies aus dem folgenden Artikel: A Guide to Styling an Ionic2 Application.

Answer 3

Die Navbar hat ihre eigenen Stile. Also müssen Sie es überschreiben.

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

Answer 4

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

Könnte auch sekundär sein, usw., oder andere Farben aus der SCSS.

Answer 5

Leider ist dies nicht mehr erscheint in der neuesten Version von Ionic2 zu arbeiten (Stand 10/25/16 - ionic -version = 2.1.4) mit folgenden Abhängigkeiten in 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", 

zu lösen, das ich folgende zu app.scss hinzuzufügen hatte:

.toolbar-background { 
    background-color: blue; 
} 

Answer 6

aus ionischen 2 können Sie benutzerdefinierten Stil in Ihrem src/theme/Variablen hinzufügen.SCSS Datei

Und dann die Klasse hinzufügen, wo Sie

Jetzt

das Ergebnis sehen wollen

Referenz: Theming your Ionic App

Answer 7

Gerade jetzt (RC4) der richtige Weg, dies zu tun ist, um die /src/themes/variables.scss Datei zu ändern und hinzufügen:

$toolbar-background: blue; 

Dies ändert effektiv die Farbe für überall dort, wo der Wert verwendet wird. Mehr Infos here

Answer 8

Hier ist eine Antwort, die ich auf dem ionic2 Forum gefunden und es funktionierte für mich:

ändern navbar Kopfhintergrundfarbe Ionic 2: https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498

Answer 9

i finden Lösung für den Header von Farbe Attribut wie die folgenden in Navigationsleiste:

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

für den Seitenhintergrund Menüleiste, um variables.scss Datei gehen und diesen Code hinzu:

$toolbar-background: $primary;