# How to change/update scss variables values?

**URL:** <https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336>\
**Category:** ionic-v3\
**Created:** [April 9, 2018, 7:49am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336 "2018-04-09T07:49:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![anand2610](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@anand2610](https://forum.ionicframework.com/u/anand2610)\
**Post date:** [April 9, 2018, 7:49am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/1 "2018-04-09T07:49:19Z")

</div>

```auto
$theme_color: rgb(0,170,80);
$colors: (
  primary: $theme_color, //488aff
  danger: #f53d3d,
  light: #f4f4f4,
  dark: #222, //#222,
  lightgrn: #EAEDED,
  footer_bg: rgba(0,0,0,0.2),
  blur_bg: rgba(0,0,0,0.4),
  transpnt: transparent
);

```

How to change $theme\_color value from Components.ts file ?  
is this possible?  
Thanks in advance

- Anand

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [April 10, 2018, 1:06am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/2 "2018-04-10T01:06:07Z")

</div>

See:

- [https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/](https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/)
- [Theming your Ionic App](https://forum.ionicframework.com/t/theming-your-ionic-app/111841)

---

<div class="post-metadata">

**Author:** ![anand2610](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@anand2610](https://forum.ionicframework.com/u/anand2610)\
**Post date:** [April 10, 2018, 5:02am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/3 "2018-04-10T05:02:22Z")

</div>

Thanks for your reply.  
I need change value like

```auto
In components.ts file
Platform.ready(()=>{
$color.primary = < new value >
});

```

is this possible ?

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [April 10, 2018, 5:19am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/4 "2018-04-10T05:19:46Z")

</div>

See this post: [https://robferguson.org/blog/2017/11/13/theming-your-ionic-3-app-part-2/](https://robferguson.org/blog/2017/11/13/theming-your-ionic-3-app-part-2/)

Re ‘dynamically switching themes’

---

<div class="post-metadata">

**Author:** ![anand2610](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@anand2610](https://forum.ionicframework.com/u/anand2610)\
**Post date:** [April 10, 2018, 5:35am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/5 "2018-04-10T05:35:10Z")

</div>

I can understand your answer. But I need update variable value at run time in variable.scss file.  
I think it’s not possible…🙄  
correct ?

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [April 10, 2018, 5:41am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/6 "2018-04-10T05:41:01Z")

</div>

When you build an Ionic App the Ionic CLI invokes the Sass executable to compile `.sass` and `.scss` files to `.css` files.

---

<div class="post-metadata">

**Author:** ![anand2610](https://avatars.discourse-cdn.com/v4/letter/a/ecccb3/32.png) [@anand2610](https://forum.ionicframework.com/u/anand2610)\
**Post date:** [April 10, 2018, 5:51am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/7 "2018-04-10T05:51:32Z")

</div>

I got the answer, here my working code  
variable.scss

```auto
$theme_color: rgb(0,170,80); //default
.myTheme1 {
  $theme_color: red !global;
}
.myTheme2 {
  $theme_color: blue !global;
}
.myTheme3 {
  $theme_color: yellow !global;
}

$colors: (
  primary: $theme_color,
  secondary: 00aa51,
  danger: #f53d3d,
  light: #f4f4f4,
  dark: #222, //#222,
  lightgrn: #EAEDED,
  footer_bg: rgba(0,0,0,0.2),
  blur_bg: rgba(0,0,0,0.4),
  transpnt: transparent
);

```

app.html  
\<ion-nav [root]=“rootPage” #content [class]=“myTheme”\>

Component.ts  
myTheme: string = “myTheme2”;

Thank you for you replies.

---

<div class="post-metadata">

**Author:** ![L3vick](https://avatars.discourse-cdn.com/v4/letter/l/c2a13f/32.png) [@L3vick](https://forum.ionicframework.com/u/L3vick)\
**Post date:** [October 1, 2018, 3:23pm UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/8 "2018-10-01T15:23:57Z")

</div>

I don’t know why, but without setting mytheme = ‘whatever’ is taking the last theme and all ‘primary’ are yellow. If I delete theme3 then are blue. and when I set the theme nothing changes.

---

<div class="post-metadata">

**Author:** ![kfrager](https://avatars.discourse-cdn.com/v4/letter/k/f14d63/32.png) [@kfrager](https://forum.ionicframework.com/u/kfrager)\
**Post date:** [March 8, 2019, 7:42am UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/9 "2019-03-08T07:42:06Z")

</div>

Hi L3vick, I am getting this same problem.  
It is already automatically defaulting to the last theme and its colours and is not dynamically changing.  
Did you manage to find a solution to this?

---

<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, 9:41pm UTC](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336/10 "2021-07-19T21:41:17Z")

</div>