Динамическое изменение переменных CSS4

Question

Мне приходится обрабатывать несколько primary и других переменных CSS4 для разных компаний.Как я могу справиться с этим вариантом использования?т.е. изменить основной цвет переменной CSS4 динамически в соответствии с компанией?

Примечание: Мой пример использования: мне просто нужно обновить переменную primary без учета элемента html.Затем это влияет на все места, где primary был использован.

.html

 <ion-button color="primary" (click)="reservation()">Book Now</ion-button>

variables.scss

:root {
  /** primary **/
  --ion-color-primary: rgb(180, 151, 90);
}

У другой компании есть это: Но мне нужноустановить это динамически.

  :root {
      /** primary **/
      --ion-color-primary: rgb(129 147 171);
    }

Могу ли я использовать для этого сервис?

export class ThemeSwitcherService {

  constructor() { }


  setTheme(data: string): void {

    switch (data) {
      case "com1":
        primary:com1 color//how to do it here
        break;
      case "com2":
       primary:com2 color
        break;
      default:
    }

  }
}

Answer 1

Это переключатель тем, который я использовал.

import { Injectable, Inject } from '@angular/core';
import { DomController } from '@ionic/angular';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class ThemeSwitcherService {

  constructor(private domCtrl: DomController,
    @Inject(DOCUMENT) private document) { }

  setTheme(data: string): void {

    switch (data) {
      case "com1":
        this.domCtrl.write(() => {
          this.document.documentElement.style.setProperty("--ion-color-primary", "rgb(180, 151, 90)");
        });
        break;
      case "com2":
        this.domCtrl.write(() => {
          this.document.documentElement.style.setProperty("--ion-color-primary", "rgb(129,147,171)");
        });
        break;
      default:
    }

  }
}

Это мне очень помогло: Переключатель тем