ionic2入門教程（九）樣式修改和主題切換

Ionic 樣式修改和主題切換

系列教程看這裏
Ionic2入門教程（一）安裝和環境配置
Ionic2入門教程（二）進階配置：Android打包
ionic2入門教程（三）高仿網易公開課（1）
ionic2入門教程（四）解讀目錄結構
ionic2入門教程（五）如何使用IonicPage
ionic2入門教程（六）地圖服務（谷歌、高德、百度定位）
ionic2入門教程（七）來一個五星評分
ionic2入門教程（八）高仿網易公開課（2）

以爲纔開始接觸一個新框架時確定有些迷茫，好比說樣式我要怎麼改，爲何我每新建你個組件都會有一個scss，而後還有app.scss，theme下面還有個variable.scss，應該加在哪裏呢？

默認的樣式怎麼覆蓋呢？咱們能夠去官網找對應的默認變量而後覆蓋：
好比頁面背景顏色：$background-color:#f5f5f5;

可是好比說header的顏色就很難改，由於沒有暴露默認變量，因此咱們能夠找到對應的css的class，

好比：.toolbar-background { background-color: #212121 !important; }

而後主題切換呢，是比較好玩的一個功能，經過實現這樣一個功能呢，你也會掌握大部分樣式修改的方法~

一、樣式修改

1.每一個頁面本身的scss

在組件中使用局部樣式，以利於維護

2.app/app.scss

這裏是你的全局樣式。那些會影響你整個應用的樣式集中存放在這裏。

3.theme/variables.scss

覆蓋默認變量--官方指南

二、主題切換

0.切換效果

1.在theme下新建兩個scss文件

theme.light.scss
theme.dark.scss

2.內容

theme.light.scss

.light-theme {
  ion-content {
    background-color: #fff;
    
  }
 
  .toolbar-background {
    background-color: #fff;
  }
  $tabs-md-tab-text-color: grey;  
  $tabs-md-tab-text-color-active : #32db64;  
  $tabs-md-tab-icon-color : grey;  
  $tabs-md-tab-icon-color-active : #32db64;  
  
  //bgcolor
  $list-border-color:grey;
  $list-background-color:white;
  
  $tabs-background:white;
  
  
  $background-color:#f5f5f5;
}

theme.dark.scss

.dark-theme {
  ion-content {
    background-color: #090f2f;
    color: #fff;
  }
  .header .toolbar-background {
    background-color: #090f2f;
  }
  .grid,
  .sift-title {
    background-color: #090f2f;
  } //bgcolor
  .tab-button {
    background-color: #090f2f;
  }
  $tabs-background:#090f2f;
  $background-color:grey;
}

3.在variables.scss導入

@import "theme.light";
@import "theme.dark";

4.建立一個setting服務

ionic g provider settings

爲了確保咱們的應用程序始終是最新選擇的主題，咱們使用一種稱爲BehaviourSubject的類型，它繼承自Subject，而後從Observable繼承，所以它或多或少是一種特殊類型的Observable。

因此在咱們的構造函數中，咱們設置一個初始值，當咱們想要將它設置爲一個新值時，咱們用到next()方法，最後咱們將它做爲一個Observable返回到咱們的視圖，由於咱們不須要更多的特殊功能 只需使用它像一個標準的Observable。

setting.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { BehaviorSubject } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

/*
  Generated class for the SettingProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class SettingProvider {

  private theme: BehaviorSubject<String>;
  
     constructor() {
         // theme 是 BehaviorSubject實例
         this.theme = new BehaviorSubject('light-theme');
     }
  
     setActiveTheme(val) {
         // 改變值
         this.theme.next(val);
     }
  
     getActiveTheme() {
         // 觀察
         return this.theme.asObservable();
     }

}

5.切換按鈕

home.html

<button ion-button full icon-left (click)="changeTheme()">
    <ion-icon name="heart" color="danger"></ion-icon>
  </button>

home.ts

import { SettingProvider } from './../../providers/setting/setting';
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  selectedTheme: String;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private settings: SettingProvider) {
    // 獲取當前主題
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
  }

  onSlideChanged() {
    const currentIndex = this.slider.getActiveIndex();
    // console.log(currentIndex);
  }
  changeTheme() {
    if (this.selectedTheme === 'dark-theme') {
      //改變
      this.settings.setActiveTheme('light-theme');
    } else {
      this.settings.setActiveTheme('dark-theme');
    }
  }
}

5.在入口的app組件應用主題

app.html

<!-- 動態添加class -->
<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SettingProvider } from './../providers/setting/setting';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  
  rootPage:any = "TabsPage";
  selectedTheme: String;

  constructor(
    platform: Platform, 
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    private settings: SettingProvider) {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

三、經常使用css類

//header字體顏色
.toolbar-title,.bar-button{
    color:white;
}
//header背景顏色
.toolbar-background {
  background-color: #212121 !important;
}

四、經常使用sass變量

//tabs
$tabs-md-tab-text-color: grey;  
$tabs-md-tab-text-color-active : #32db64;  
$tabs-md-tab-icon-color : grey;  
$tabs-md-tab-icon-color-active : #32db64;  

//bgcolor
$list-border-color:grey;
$list-background-color:white;

$tabs-background:white;

$background-color:#f5f5f5;

五、參考

Observable詳解
dynamic-theming-ionic

六、源碼

https://github.com/JiaXinYi