Set sass variable value in Angular 7

Question

I have been working with angular for the last few weeks, and now I have a requirement to dynamically style a public site. The site admin set various color codes as well as a log

Answer 1

While @Cold Cerberus has suggested a good approach and is right about maintaining style related things at front-end, i am suggesting some ways for this.

As you said you want various colour combination,you can use Conditional CSS of SASS.

body[theme="theme1"] {
   // theme 1 css
}

body[them="theme2"] {
    // theme 2 css
}

You can use sass theme map along with conditional css.

Just update your attribute and theme will be applied automatically.

    themeChange() {
    const dom = document.querySelector('body');
    dom.theme = theme1;    // change theme here
    }

If you are very particular about some element style which should be updated from back-end (like colour code) you can use ng-style along with theme approach.

...

You have to use smart combination of above in order to fulfill your requirement.