Change Style Variable at Runtime

Ionic Framework ionic-v3
1

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 and this How to change/update scss variables values?
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.

2

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