Ionic 更换主题风格方案

需求

最近涉及到的一个需求是——用户可更换页面风格，因此，查了一些资料后，写一下Ionic更换主题方案

方案

动态改变根标签类名，比如亮色风格时，class="light"，比如暗色风格时，class="dark"

步骤

1.在 src/theme 文件夹下，新建两种不同风格

light.theme.scss

dark.theme.scss

2.在切换事件发生时，动态改变类名，因此，我们需要先写一个服务，用于初始化值、接收传入的新值、返回值

① 执行命令，创建setting服务
ionic g provider settings

② setting.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs/Rx";@Injectable()
export class SettingsProvider {private theme:BehaviorSubject<String>;constructor() {//默认初始值this.theme = new BehaviorSubject('dark-theme');}setActiveTheme(val){//新值this.theme.next(val);}getActiveTheme() {//观察return this.theme.asObservable();}
}

BehaviorSubject：继承自subject，发射observable数据

3.在页面中注入服务

home.html

<ion-content padding><p text-center>I shine at night and glow at day.</p><button ion-button full icon-left (click)="toggleAppTheme()"><ion-icon  name="bulb"></ion-icon>Toggle Theme</button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {SettingsProvider} from "../../providers/settings/settings";@Component({selector: 'page-home',templateUrl: 'home.html'
})
export class HomePage {selectedTheme:String;constructor(public navCtrl: NavController,private settings:SettingsProvider) {//订阅可观察者对象this.settings.getActiveTheme().subscribe(val=> this.selectedTheme = val);}toggleAppTheme() {//切换事件发生时if (this.selectedTheme === 'dark-theme') {this.settings.setActiveTheme('light-theme');} else {this.settings.setActiveTheme('dark-theme');}}}

4.同时，在根目录文件中注入服务，从而动态更换根标签类名

app.html

<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>
<!--绑定class名-->

app.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 { HomePage } from '../pages/home/home';
import {SettingsProvider} from "../providers/settings/settings";
@Component({templateUrl: 'app.html'
})
export class MyApp {rootPage:any = HomePage;selectedTheme: String;constructor(platform: Platform,statusBar: StatusBar,splashScreen: SplashScreen,private settings:SettingsProvider) {this.settings.getActiveTheme().subscribe(val=> this.selectedTheme = val)}
}

5.效果图

参考：
dynamic-theming

Ionic 更换主题风格方案相关推荐

【sublime】安装插件、主题风格、下载、安装一步到位
作为一名前端开发的妹子,前端代码编辑器我一般是超喜欢用notepad++的,但最近迷上了sublime,因为它的用户界面太美观啦!所以今天分享下sublime的下载.安装.安装插件以及更换主题风格.赶 ...
为你的Android Studio更换好看的主题风格
为你的Android Studio更换好看的主题风格 https://blog.csdn.net/Likianta/article/details/78701481 1. 访问主题包下载网站Color ...
一键换肤--动态更换主题颜色风格
基于前一段时间项目具有换肤需求的功能,几经预研学习换肤功能效果,网上的资源很多,最初看到是网易换肤的酷炫效果,今天得空打算写一篇关于换肤功能的文章,项目无需重启Activity的就可以实现无缝换肤切换 ...
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...
系统主题修改桌面嵌入html,更换主题桌面主题 Win7桌面动态主题怎么更换
Win10怎么更换主题,win10怎么更换桌面背景 Win10系统更换主题方法在桌面空白区域点击右键,选择"个性化". 选择你喜欢的主题,点击"下载".下载后 ...
可以在xmind上同时有两个大主题吗_教程｜如何自定义主题风格？
「风格编辑器」功能终于在 XMind: ZEN 2020 上线!有了「风格编辑器」,你可以自由发挥创意,创造独具个人特色的思维导图,更可以赋予颜色和形状以特殊意义,建构专属的思维符号体系. 自定义主题 ...
miui主题风格_一种android系统换肤功能的设计,董红光：MIUI主题风格.pdf
MIUI主题风格主题风格主题风格主题风格一种Android系统换肤功能的设计思路董红光 2/29/2012 "主题"是什么 ? Symbian的"主题" A ...
联想微型计算机如何更改主题,联想vibe怎么更换主题联想vibe主题更换方法【图文】...
一个好看的手机主题可以给并不漂亮的外观增加点缀性的功能,也可以给您的使用上,带来前所未有的方便.每一种主题的菜单功能都是不一样的,有的字体不一样,有的颜色图案不一样,每一种带来的都是不同的风格.联想v ...
2020版本IDEA怎样下载和导入好看的代码主题风格【图文】详细
1.首先你得去网站上下载IDEA主题,推荐这个下载网站,当然你也可以去其他网站上下载主题的. 地址:http://www.soft-hub.cn/idea/list.html?page=2 对了,这个 ...

Ionic 更换主题风格方案

需求

方案

步骤

Ionic 更换主题风格方案相关推荐

最新文章

热门文章