Change Sass variable dinamically within component Ionic 3 / Angular 5

Question

I want to change color primary dinamically in one Page and set to the rest of the app.

I am following this tutorial to do it https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/ so trying to adapt to my context this is what I'm doing.

app.html

<ion-nav [root]="rootPage" #content [class]="theme"></ion-nav>

app.component.ts

    export class MyApp {
         rootPage:any = WelcomePage;

         public theme: String = 'theme';


     constructor(platform: Platform, public event: Events ) {
    platform.ready().then(() => {

      event.subscribe('theme:toggle', () => {
        this.toggleTheme();
      });

    });

  }



public toggleTheme() {
    console.log('tooogletheme')
    if (this.theme === 'theme') {
      this.theme = 'theme2';
    } else {
      this.theme = 'theme';
    }
  }

/theme/variables.scss

$theme_color: #063351; //Default

$colors: (
  primary:   $theme_color,
  secondary:  #32db64,
  danger:     #f53d3d,

/theme/theme.scss

 .theme {
    $theme_color: rgb(0, 152, 145) !global; 
 }

/theme/theme2.scss

  .theme2 {
     $theme_color: rgb(255,77,90)  !global;
  }

And i want to change it from another page so I'm calling...

 this.event.publish('theme:toggle');

the event is called but nothing happens.

Thanks for any help.

Edit:

I can see the class name changes inside ion nav when i call the event to toggle class. but I don't know if $theme-color is changing, or the class is not applied to the content.

Answer 1

you may need to use ngClass directive, and add the appropriate class dynamically:

<ion-nav [root]="rootPage" #content [ngClass]="theme"></ion-nav>