# Change Style Variable at Runtime

**URL:** <https://forum.ionicframework.com/t/change-style-variable-at-runtime/149714>\
**Category:** ionic-v3\
**Created:** [December 7, 2018, 1:02pm UTC](https://forum.ionicframework.com/t/change-style-variable-at-runtime/149714 "2018-12-07T13:02:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![b5518388](https://avatars.discourse-cdn.com/v4/letter/b/7993a0/32.png) [@b5518388](https://forum.ionicframework.com/u/b5518388)\
**Post date:** [December 7, 2018, 1:02pm UTC](https://forum.ionicframework.com/t/change-style-variable-at-runtime/149714/1 "2018-12-07T13:02:34Z")

</div>

Hey,

i have the following usecase. my app has a default theme and the app is connected to my webserver. on the webserver every user can customise his styles (logo image and colors for example here my variables scss file:

$colors: (  
primary: #92c7ff,  
secondary: #32db64,  
danger: #6c1d23,  
light: #f4f4f4,  
dark: #222,

color1: #102948,  
color2: #6c1d23,

colorNavBar: #FFFFFF,  
colorNavBarText: #003367,

colorLogout: #6c1d23,  
colorLogoutText: #FFFFFF,  
//colorSendBtn: #6c1d23,  
//colorSendBtnText: #FFFFFF,  
//colorSendBar: #aaaaaa,

btnColor: #003367,  
btnColor2: #92c7ff,  
btnColorText: #FFFFFF,  
colorBg: #FFFFFF,

listColor-Odd: #c8dcf1,

listColor-Selected: #003367,  
listFontColor-Selected: white,  
}

if the user logs in my app the app should will load all the custom settings and should override the colors like set in my webserver.  
is there any nice idea?  
i found this: [https://stackoverflow.com/questions/51312653/how-can-i-set-scss-variable-value-at-runtime](https://stackoverflow.com/questions/51312653/how-can-i-set-scss-variable-value-at-runtime) and this [How to change/update scss variables values?](https://forum.ionicframework.com/t/how-to-change-update-scss-variables-values/127336)  
but those solutions arent really practical for me… for example i cant make N different themes and switch between them cause if one user changes something i need to build the app new.

---

<div class="post-metadata">

**Author:** ![b5518388](https://avatars.discourse-cdn.com/v4/letter/b/7993a0/32.png) [@b5518388](https://forum.ionicframework.com/u/b5518388)\
**Post date:** [December 10, 2018, 6:59am UTC](https://forum.ionicframework.com/t/change-style-variable-at-runtime/149714/2 "2018-12-10T06:59:36Z")

</div>

one idea is that i override the color style in the html per element.  
Some logic in the controller like: color if property is set for this color use it else use default. but this is not a nice way and also a lot of changes at html side and is also not very maintainable

---

<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:07pm UTC](https://forum.ionicframework.com/t/change-style-variable-at-runtime/149714/3 "2021-07-19T21:07:47Z")

</div>

Closed on July 19, 2021, 9:07pm UTC