动态更改 Angular 中的字体、背景颜色

Question

我们有一个使用 Angular 9 构建的 Web 应用程序。它的标题、边框和一些菜单背景的颜色存储在 css 文件中的多个位置。

要求是根据客户品牌改变这些。因此，如果 ClientA 登录，他们应该开始看到这些颜色为 #FF0000，如果 ClientB 登录，他们需要看到这些颜色为 #00FF00。

除了使用 style="color:{{clientColor}} 对每个 html 进行内联样式之外，您能帮忙建议最好的方法吗？

谢谢！

Answer 1

您可以尝试使用 :root 选择器和其中的变量，对于 body 标记，只需覆盖这些根变量，工作示例如下：stackblitz

styles.scss：

:root {
  --fontColor: #000;
}

.theme-dark {
  --fontColor: red;
}

app.component.ts

export class AppComponent  {
  theme = 'theme-dark';

  toggle(): void {
    const body = document.body;

    if (body.classList.contains(this.theme)) {
      body.classList.remove(this.theme);
    } else {
      body.classList.add(this.theme);
    }

  }
}

app.component.html

<p>
  Start editing to see some magic happen :)
</p>

<button (click)="toggle()">Toggle color font</button>

应用程序组件.scss

p {
  font-family: Lato;
  color: var(--fontColor);
}

Answer 2

你可以使用这个：

[style.color]="clientColor"