动态更改 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:
    }

  }
}

这对我帮助很大：Theme Switcher

动态更改 CSS4 变量

Change the CSS4 variables dynamically

css

typescript

angular

ionic4

angular7