[英]Ionic-3 how to change the ionic theme dynamically
I need to change my ionic app theme dynamically. 我需要动态更改我的离子应用主题。 $color theme value should be rendered from database
$ color主题值应该从数据库中呈现
Give me some idea to short out this! 给我一些想法来简化这个!
26-02-2019 26-02-2019
With Ionic 4
and CSS 4
this is a very simple task. 使用
Ionic 4
和CSS 4
这是一项非常简单的任务。 Please see this article . 请看这篇文章 。
service.ts service.ts
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { DomController } from '@ionic/angular';
interface Theme {
name: string;
styles: ThemeStyle[];
}
interface ThemeStyle {
themeVariable: string;
value: string;
}
@Injectable({
providedIn: 'root'
})
export class ThemeSwitcherService {
private themes: Theme[] = [];
private currentTheme: number = 0;
constructor(private domCtrl: DomController, @Inject(DOCUMENT) private document) {
this.themes = [
{
name: 'day',
styles: [
{ themeVariable: '--ion-color-primary', value: '#f8383a'},
{ themeVariable: '--ion-color-primary-rgb', value: '248,56,58'},
{ themeVariable: '--ion-color-primary-contrast', value: '#ffffff'},
{ themeVariable: '--ion-color-primary-contrast-rgb', value: '255,255,255'},
{ themeVariable: '--ion-color-primary-shade', value: '#da3133'},
{ themeVariable: '--ion-color-primary-tint', value: '#f94c4e'},
{ themeVariable: '--ion-item-ios-background-color', value: '#ffffff'},
{ themeVariable: '--ion-item-md-background-color', value: '#ffffff'},
{ themeVariable: '--ion-tabbar-background-color', value: '#fff'},
{ themeVariable: '--ion-tabbar-ios-text-color-active', value: '#000000'},
{ themeVariable: '--ion-tabbar-md-text-color-active', value: '#000000'},
{ themeVariable: '--ion-background-color', value: '#f94c4e'}
]
},
{
name: 'night',
styles: [
{ themeVariable: '--ion-color-primary', value: '#222428'},
{ themeVariable: '--ion-color-primary-rgb', value: '34,34,34'},
{ themeVariable: '--ion-color-primary-contrast', value: '#ffffff'},
{ themeVariable: '--ion-color-primary-contrast-rgb', value: '255,255,255'},
{ themeVariable: '--ion-color-primary-shade', value: '#1e2023'},
{ themeVariable: '--ion-color-primary-tint', value: '#383a3e'},
{ themeVariable: '--ion-item-ios-background-color', value: '#717171'},
{ themeVariable: '--ion-item-md-background-color', value: '#717171'},
{ themeVariable: '--ion-tabbar-background-color', value: '#222428'},
{ themeVariable: '--ion-tabbar-ios-text-color-active', value: '#ffffff'},
{ themeVariable: '--ion-tabbar-md-text-color-active', value: '#ffffff'},
{ themeVariable: '--ion-background-color', value: '#383838'}
]
}
]
}
cycleTheme(): void {
if(this.themes.length > this.currentTheme + 1){
this.currentTheme++;
} else {
this.currentTheme = 0;
}
this.setTheme(this.themes[this.currentTheme].name);
}
setTheme(name): void {
let theme = this.themes.find(theme => theme.name === name);
this.domCtrl.write(() => {
theme.styles.forEach(style => {
document.documentElement.style.setProperty(style.themeVariable, style.value);
});
});
}
}
我们无法动态更改$ color值,但是我们必须通过为主题创建单独的SCSS文件来更改主题,这里是参考GitHub项目https://github.com/yannbf/ionic3-components/tree/master/src/theme
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.