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、样式修改

1.每个页面自己的scss

在组件中使用局部样式，以利于维护

2.app/app.scss

这里是你的全局样式。那些会影响你整个应用的样式集中存放在这里。

3.theme/variables.scss

覆盖默认变量--官方指南

2、主题切换

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();
    });
  }
}

3、常用css类

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

4、常用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;

5、参考

Observable详解
dynamic-theming-ionic

6、源码

https://github.com/JiaXinYi