Ionic - Dynamically change page theme using Json data

Ionic Framework ionic-v3
1

I have a page for which I would like to change the color depending on the data passed. In Json file I have mentioned the color which needs to be applied.

for Example list Item 1 data consist of color : red, list Item 2 - Blue,…

when I select one of the list item, I push a new page to the stack and so I pass the data using navParams. Now, all my css is in .scss file and I need some way to pass the color from .ts to .scss file. I have a scss variable to which I would like to override the data.

I tried to do this :

$theme = this.data.theme;
I have defined $theme : #00ff00 in my .scss file.

Uncaught (in promise): ReferenceError: $theme is not defined
ReferenceError: $theme is not defined

I cannot create all the themes beforehand because there could be 1000s of varying colors and so having all the themes defined is not possible. I prefer passing color to the scss file and overriding all the colors present in the page but scss files are already compiled during build.

How can I get the apply color coming from JSON data to few css properties in a given page. I have like blue color for example in a page in several places and I want to change all of which by this new color.

2

scss variables gonna be interpreted at build time, result from this gonna be css where $variables doesn’t exists anymore

what you should probably do, is using conditional css class or attributes

For example, quick and dirty pseudo code, using a boolean variable to define which class theme to use

<div [class.theme1]="myVariable" [class.theme2]="!myVariable"></div>

=> output:

<div class="theme1"></div> or <div class="theme2"></div>

or an attribute

<div [attr.theme1]="myVariable" [attr.theme2]="!myVariable"></div>

=> output:

<div theme1></div> or <div theme2></div>
3

Having the same problem now. Manage to solve it Murlidhar?