How to write dynamic styles in Angular 2?

Question

css

The idea is to have the styles depend on the js variables, but not overload the html with inline styles.
For example, we need a standard color around which the design of other components dances. In less we can put that color into a variable and then use some simple math to calculate the color deviation.

@main-color: #f00;
.smth {
  color: @main-color + #0f0;
}

But here comes the problem: to allow the user to spin the editing wheel for this color in real time. It turns out the problem is that the colors are compiled and built into css classes. Can styles and scripts interact in Angular 2 without deviating from writing css in the React style (description of styles in code)?

Answer 1

less.js

Answer 2

Alternatively, you can override the value of the CSS variable with JS (see CSS custom properties)