# Ionic - Dynamically change page theme using Json data

**URL:** <https://forum.ionicframework.com/t/ionic-dynamically-change-page-theme-using-json-data/112630>\
**Category:** ionic-v3\
**Created:** [November 19, 2017, 11:58am UTC](https://forum.ionicframework.com/t/ionic-dynamically-change-page-theme-using-json-data/112630 "2017-11-19T11:58:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Murlidhar](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@Murlidhar](https://forum.ionicframework.com/u/Murlidhar)\
**Post date:** [November 19, 2017, 11:58am UTC](https://forum.ionicframework.com/t/ionic-dynamically-change-page-theme-using-json-data/112630/1 "2017-11-19T11:58:11Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [November 19, 2017, 12:19pm UTC](https://forum.ionicframework.com/t/ionic-dynamically-change-page-theme-using-json-data/112630/2 "2017-11-19T12:19:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kennRoss88](https://avatars.discourse-cdn.com/v4/letter/k/ecd19e/32.png) [@kennRoss88](https://forum.ionicframework.com/u/kennRoss88)\
**Post date:** [November 12, 2018, 10:55am UTC](https://forum.ionicframework.com/t/ionic-dynamically-change-page-theme-using-json-data/112630/3 "2018-11-12T10:55:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 10:03pm UTC](https://forum.ionicframework.com/t/ionic-dynamically-change-page-theme-using-json-data/112630/4 "2021-07-19T22:03:28Z")

</div>