Menu
I need to change my ionic app theme dynamically. $color theme value should be rendered from database
Give me some idea to short out this!
733
The fastest way to change the theme of your Ionic app is to set a new value for primary , since Ionic uses the primary color by default to style most components. Colors can be removed from the map if they aren't being used, but primary should not be removed.
A color can be applied to an Ionic component in order to change the default colors using the color attribute. Notice in the buttons below that the text and background changes based on the color set. When there is no color set on the button it uses the primary color by default.
Ionic Dark Theme Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts: Changing the default Ionic colors for all modes to complement the dark background in the body. dark selector.
26-02-2019
With Ionic 4 and CSS 4 this is a very simple task. Please see this article.
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);
});
});
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
