How to set data in css variable that came from the back?

Question

Angular

Hello, I have data for a dark site background. They are stored in the MSQL database (The colors just lie there). I need to take these colors from the base and substitute variables in CSS. I took the colors, but I don’t know how to further substitute them in CSS variables. Tell me how to do it? And is it possible to implement this at all?

Answer 1

Shouldn't be a problem

export class Component {
  constructor(
    private _http: HttpClient,
    private _elementRef: ElementRef
  ) {}

  ngOnInit() {
    const json = '{"--background-color": "black", "--text-color": "red"}';
    this._http.get('host')._subscribe(_res => {
      for (let [key, value] of Object.entries(
        JSON.parse(json)
      )) {
        this._elementRef.nativeElement.style.setProperty(
          key,
          value
        );
        console.log({ key, value });
      }
    });
  }
}

• https://tyapk.ru/blog/post/angular-theming-with-cs...
  
• https://netbasal.com/binding-css-variables-in-angu...