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

Question

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

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

除了每隔 html 使用 style="color:{{clientColor}} 进行内联样式设置之外，您能帮忙推荐最好的方法吗？

谢谢！

Answer 1

你可以使用这个：

[style.color]="clientColor"

Answer 2

您可以尝试使用 :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>

app.component.scss

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

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

Dynamically change font, background colors in Angular

html

css

angular

angular-ui-bootstrap

styling