时间戳

首页 > 解决方案 > 动态更改 CSS4 变量

css - 动态更改 CSS4 变量

问题描述

我必须primary为不同的公司处理多个和其他 CSS4 变量。我该如何处理这种用例？即根据公司动态更改主要的CSS4可变颜色？

注意：我的用例是我只需要更新primary变量而不考虑 html 元素。然后它会影响所有使用过的地方primary。

.html

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

变量.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:
    }

  }
}

标签： cssangulartypescriptangular7ionic4

解决方案

这是我用过的主题切换器。

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:
    }

  }
}

这对我帮助很大：主题切换器

推荐阅读