0

I am trying to change a variable's value in "../myStyle.scss" file from myComponent.ts . I read that it is impossible to achieve it because sass file are compiled into css by the sass pre-processor and the variable disapears. Isn't there a way to work this around.

My variable is called $theme. And I want to change it's value.

$theme: #5A352A; and I want it to become $theme: #ffffff; when the user clicks

esdras
  • 13
  • 4
  • Refer to this post : https://stackoverflow.com/questions/17787845/how-to-control-sass-variable-with-javascript – Loïc Monard Apr 30 '19 at 10:05
  • 1
    Possible duplicate of [How to control Sass Variable with javascript](https://stackoverflow.com/questions/17787845/how-to-control-sass-variable-with-javascript) – לבני מלכה Apr 30 '19 at 10:07

1 Answers1

1

You have to work in a different way.

Basically when you compile the angular app , it will generate a css file where it substitute the variable with the value , wherever you used it.

So if you want to achieve a color change you have to create a other variable and other classes and swipe it in your class attributes (this is one way, check also ngStyle and ngClass in angular reference).

For example white-theme/dark-theme (the most common case). variables -> $black: #00000; $white: #ffffff

Example classes:

.body-dark {
 background-color: $black;
}

.body-white {
 background-color: $white;
}

and swipe the classes in the html elements.

setDark(){
document.getElementById("bodyId").setAttribute("class","body-dark ")
}

the same for white.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Riccardo Albero
  • 111
  • 6
  • Thank you. I already know this way but i find it very heavy everything that you want to change on your screen must have this attribute. And it gets heavier when your theme has many colors – esdras Apr 30 '19 at 10:39
  • maybe you can work with ngStyle and ngClass , could help to find a solution that fit your needs https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/ – Riccardo Albero Apr 30 '19 at 10:45