feat(theme): add theme switch demo

README.md

@@ -41,11 +41,13 @@ commitizen init cz-conventional-changelog --save --save-exact
 - [x] 本地通知
 - [x] 远程推送
 - [x] NGRX
-- [ ] 技巧与工具
+  - [x] TODO Demo
+- [x] 主题切换示例
+- [x] 常用组件
+  - [x] 二维码扫描
 - [ ] Cordova 插件说明与示例
-- [ ] 主题切换
-- [ ] 常用组件
 - [ ] 用户行为统计
+- [ ] 技巧与工具分享
 
 ## 运行环境介绍
 

src/app/app.component.html

@@ -1,50 +1,42 @@
 <ion-app>
-  <ion-split-pane>
-
+  <ion-split-pane
+    [ngClass]="{
+      'dark-theme': selectedTheme === 'dark-theme',
+      'light-theme': selectedTheme !== 'dark-theme'
+    }"
+  >
     <ion-menu>
       <ion-header>
-        <ion-toolbar>
-          <ion-title>菜单</ion-title>
-        </ion-toolbar>
+        <ion-toolbar> <ion-title>菜单</ion-title> </ion-toolbar>
       </ion-header>
       <ion-content>
-
         <ion-list *ngIf="!loggedIn">
-          <ion-list-header>
-            功能点
-          </ion-list-header>
+          <ion-list-header> 功能点 </ion-list-header>
 
           <ion-menu-toggle auto-hide="false">
             <ion-item button (click)="navigate('/tabs')">
               <ion-icon slot="start" name="home"></ion-icon>
-              <ion-label>
-                首页
-              </ion-label>
+              <ion-label> 首页 </ion-label>
             </ion-item>
           </ion-menu-toggle>
 
           <ion-menu-toggle auto-hide="false">
             <ion-item button (click)="navigate('/tabs/(list:list)')">
               <ion-icon slot="start" name="information-circle"></ion-icon>
-              <ion-label>
-                列表
-              </ion-label>
+              <ion-label> 列表 </ion-label>
             </ion-item>
           </ion-menu-toggle>
 
           <ion-menu-toggle auto-hide="false">
             <ion-item button (click)="navigate('/tabs/(test:test)')">
               <ion-icon slot="start" name="hammer"></ion-icon>
-              <ion-label>
-                测试
-              </ion-label>
+              <ion-label> 测试 </ion-label>
             </ion-item>
           </ion-menu-toggle>
         </ion-list>
       </ion-content>
     </ion-menu>
 
     <ion-router-outlet main></ion-router-outlet>
-
   </ion-split-pane>
-</ion-app>
+</ion-app>

src/app/app.component.ts

@@ -36,6 +36,8 @@ export class MyApp {
   @ViewChildren(IonRouterOutlet)
   routerOutlets: QueryList<IonRouterOutlet>;
 
+  selectedTheme: String;
+
   constructor(
     public platform: Platform,
     public events: Events,
@@ -54,6 +56,11 @@ export class MyApp {
     private popoverCtrl: PopoverController,
     private router: Router
   ) {
+    this.emitservice.getActiveTheme().subscribe(val =>{
+      if(val){
+        this.selectedTheme = val;
+      }
+    });
     this.initializeApp();
     this.initTranslate();
   }

src/app/pages/list/ngrxtodo/todo-list/todo-list.component.ts

@@ -55,7 +55,7 @@ export class TodoListComponent implements OnInit {
   private readTodosState() {
     this.store.select(getVisibleTodos)
     .subscribe(todos => {
-      // debugger
+
       this.todos = todos;
     });
   }

src/app/pages/list/redux/todo/todo.reducer.ts

@@ -4,7 +4,7 @@ import * as TodoActions from './todo.actions';
 const initialState: Todo[] = [];
 
 export function TodosReducer(state: Todo[] = initialState, action: TodoActions.TodoActionType) {
-  // debugger
+
   switch (action.type) {
     case TodoActions.ADD_TODO: {
       return [

src/app/pages/list/redux/todo/todo.selectors.ts

@@ -18,7 +18,7 @@ export const getVisibleTodos = createSelector(
   getTodos,
   getFilter,
   (todos: Todo[], filter: string) => {
-    // debugger
+
     switch (filter) {
       default:
       case 'SHOW_ALL':

src/app/pages/test/test.page.html

@@ -1,25 +1,15 @@
-<!--
-  Generated template for the TestPage page.
-
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
 <ion-header>
-
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
     <ion-title>{{ 'HOME.Test' | translate }}</ion-title>
   </ion-toolbar>
-
 </ion-header>
 
-
 <ion-content padding>
   <ion-grid>
     <ion-row>
-
       <ion-col col-12 (click)="open()">
         <ion-item>
           <ion-label> 扫码拍照</ion-label>
@@ -33,7 +23,11 @@
         <ion-item>
           <ion-icon name="bulb" item-start color="primary"></ion-icon>
           <ion-label> 屏幕常亮</ion-label>
-          <ion-toggle (ionChange)="changeLightState()" color="secondary" [(ngModel)]="isAlwaysLight"></ion-toggle>
+          <ion-toggle
+            (ionChange)="changeLightState()"
+            color="secondary"
+            [(ngModel)]="isAlwaysLight"
+          ></ion-toggle>
         </ion-item>
       </ion-col>
     </ion-row>
@@ -43,12 +37,32 @@
         <ion-item>
           <ion-icon name="musical-notes" item-start color="primary"></ion-icon>
           <ion-label>语言切换</ion-label>
-          <ion-select [(ngModel)]="languageType" (ngModelChange)="setLanguageType($event)" cancelText="取消" okText="确定">
-            <ion-select-option value="zh" selected="true">中文</ion-select-option>
+          <ion-select
+            [(ngModel)]="languageType"
+            (ngModelChange)="setLanguageType($event)"
+            cancelText="取消"
+            okText="确定"
+          >
+            <ion-select-option value="zh" selected="true"
+              >中文</ion-select-option
+            >
             <ion-select-option value="en">英文</ion-select-option>
           </ion-select>
         </ion-item>
       </ion-col>
     </ion-row>
+
+    <ion-row>
+      <ion-col col-12>
+        <ion-item>
+          <ion-icon name="bulb" item-start color="primary"></ion-icon>
+          <ion-label>皮肤切换</ion-label>
+          <ion-toggle
+            (ionChange)="toggleAppTheme()"
+            color="secondary"
+          ></ion-toggle>
+        </ion-item>
+      </ion-col>
+    </ion-row>
   </ion-grid>
-</ion-content>
+</ion-content>

src/app/pages/test/test.page.ts

@@ -59,12 +59,16 @@ export class TestPage {
   @Output()
   wrongScaned: EventEmitter<any> = new EventEmitter();
 
+  selectedTheme: String;
+
   constructor(
     private insomnia: Insomnia,
     public globalservice: GlobalService,
     public modalCtrl: ModalController,
     public emit: EmitService
-  ) {}
+  ) {
+    this.emit.getActiveTheme().subscribe(val => this.selectedTheme = val);
+  }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad TestPage');
@@ -126,4 +130,12 @@ export class TestPage {
     this.globalservice.languageType = val;
     this.emit.eventEmit.emit('languageType');
   }
+
+  toggleAppTheme() {
+    if (this.selectedTheme === 'dark-theme') {
+      this.emit.setActiveTheme('light-theme');
+    } else {
+      this.emit.setActiveTheme('dark-theme');
+    }
+  }
 }

src/app/services/emit.service.ts

@@ -1,12 +1,23 @@
 import { EventEmitter, OnInit } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 
 export class EmitService implements OnInit {
   public eventEmit: EventEmitter<any>;
+  private theme: BehaviorSubject<String>;
 
   constructor() {
     console.log('Hello EmitService Provider');
     this.eventEmit = new EventEmitter();
+    this.theme = new BehaviorSubject('dark-theme');
   }
 
   ngOnInit() {}
+
+  setActiveTheme(val) {
+    this.theme.next(val);
+  }
+
+  getActiveTheme() {
+    return this.theme.asObservable();
+  }
 }

src/global.scss

@@ -13,6 +13,9 @@
 @import '~todomvc-common/base.css';
 @import '~todomvc-app-css/index.css';
 
+@import "./theme/theme.dark.scss";
+@import "./theme/theme.light.scss";
+
 ion-content {
     height: 100vh !important;
 }

src/theme/theme.dark.scss

@@ -0,0 +1,12 @@
+.dark-theme {
+    ion-content {
+        --background: #ddd;
+    }
+    .toolbar-title {
+        --color: #fff;
+    }
+    .header .toolbar-background {
+        --border-color: #ff0fff;
+        --background-color: #090f2f;
+    }
+}