Dynamically change whole CSSs

Ionic Framework ionic-v3
1

Hi, with Ionic 1, i used https://github.com/castillo-io/angular-css
to dynamically change the CSS themes.

From the angular-css document, that plugin is no longer needed with Angular 2, since there is styleUrls.

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my-component/my-component.html',
  styleUrls: ['app/components/my-component/my-component.css'],
})

But any idea, how I can dynamically change the css?
With ionic 2, there’s Theming but seems it allows to have single Theme but customizable.
Is there a way to have multiple customized Themes, and let user to select Theme?

2

you could try to change your styles via a class. So you have to generate all your themes in one css.

After that you can use ngClass to toggle a class at the body or where you want to change the styling.

3

image

Would it be possible to have app2.*.scss files and easily just swap to use app2 CSSs dynamically?
having one css and use ngClass would be super painful.

What I want is have THEME1, THEME2 and easily swap to use different themes at runtime.
Was pretty easy to do with https://github.com/castillo-io/angular-css but have no idea with ng2

4

does not tried this in angular2/ionic2 sorry.

I would go my “ugly” solution ^^.

But you are right to change styleurls on the fly.

5

can you please provide a demo if you dont mind :slight_smile: