Dynamically set scss variables angular ionic

Question

I have an API call that would get a json with my scss colours, such as

dynamic-colour: #5260ff

but this variable doesn't get called until run time of the ionic app. Was setting scss variables dynamically before compile time even possible?

From most of the angular examples I've seen, they already have a preset colour set, and I don't see any examples of what I want to achieve. Is it possible to preset a variable, but override it when running the app?

Anyone know anyways to accomplish dynamically getting scss variables from an API call and setting global variable values? I believe it's possible to run a typescript function to override each page's scss with what I want.

Mustahsan · Accepted Answer · 2020-03-10 06:52:04Z

16

SCSS is compiled to CSS during compile time, and SCSS variables are replaced with resolved value during compile time, which means there is no way to change the variable during run time. However css variables just sits there and you can easily change them,

for instance:

:root{
   --dynamic-colour: #5260ff
}

now you can change its value from your component like:

changeColor(color:string){
   document.documentElement.style.setProperty('--dynamic-colour', color);
}

Also you can assign --dynamic-colour to your scss variable as well so you wont have to do change in multiple places:

$dynamic-colour: var(--dynamic-colour);

STACKBLITZ WORKING DEMO

edited Mar 10, 2020 at 6:52

answered Mar 10, 2020 at 6:46

Mustahsan

3,8421 gold badge22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically set scss variables angular ionic

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related