Ionic2 - Change page appearence dynamically

Question

My app has 2 kinds of theme, according with the subject. However, there is some pages shared among the subjects. So , basically I need to set a different ion-content according with the subject.

I need to find a way for page-test to switch among ion-content styles.

page-test {
  ion-content{
  background-image: url('../assets/mybkg.png');
  background-size: cover;
  color: black;
}

.page-test {
   ion-content{
     background: #78d2ff;
     background: -moz-linear-gradient(top, #78d2ff 0%, #0080c0 100%);
     background: -webkit-linear-gradient(top, #78d2ff 0%, #0080c0 100%);
     background: linear-gradient(to bottom, #78d2ff 0%, #0080c0 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#78d2ff', endColorstr='#0080c0', GradientType=0);
     color: white;
  }
}

Actually I am duplicating the pages to use on different subjects. It's no good, because I am duplicating html, code and there is a good amount of situations like that, so the maintenance will be a hell so soon.

Anyone have suggestions about how to archive this ?

Answer 1

Based on this amazing post you could do something like this. In this demo you can change the styles dynamically, and you could also hide/show some parts of the view according to the current theme.

1) Adding the themes

In your src/theme folder, add two new files: theme.light.scss and theme.dark.scss :

// theme.light.scss
// -----------------
.light-theme {
  ion-content {
    background-color: #fff;
  }

  .toolbar-background {
    background-color: #fff;
  }
}

And

// theme.dark.scss
// -----------------
.dark-theme {
  ion-content {
    background-color: #090f2f;
    color: #fff;
  }

  .toolbar-title {
    color: #fff;
  }

  .header .toolbar-background {
    border-color: #ff0fff;
    background-color: #090f2f;
  }
} 

Then add the following in your src/theme/variables.scss file:

@import "theme.light";
@import "theme.dark";

2) Creating a provider

Create a SettingsProvider ( src/providers/settings/settings.ts ) to handle the changes of the current theme, like this:

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

Then you'll need to add the new provider to the app.module.ts file:

@NgModule({
    declarations: [
        // ...
    ],
    imports: [
        // ...
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
        SettingsProvider
    ]
})
export class AppModule { }

3) Updating the AppComponent

Then in your src/app/app.component.ts file, add the following:

import { SettingsProvider } from './../providers/settings/settings';
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';
@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);

    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

and in the view ( src/app/app.html ):

<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>

4) Changing the theme

In order to change the current theme, you just need to use the SettingsProvider , like this:

import { SettingsProvider } from './../../providers/settings/settings';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@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');
    }
  }

}

And in the view:

<ion-header>
  <ion-navbar>
    <ion-title>
      Night & Day
    </ion-title>
  </ion-navbar>
</ion-header>

<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>