Dynamically change font, background colors in Angular-CodePudding

We have a web application built using Angular 9. It has colors for headers, borders and some menu backgrounds stored in multiple places in css files.

The ask is to change those as per client branding. So if ClientA logs in, they should start seeing those colors as #FF0000 and if ClientB logs in, they need to see those colors as #00FF00.

Other than inline styling every html with style="color:{{clientColor}} can you help suggest the best way to do this?

Thank you!

CodePudding user response：

You can use this:

[style.color]="clientColor"

CodePudding user response：

You can try to use :root selector and variables in it, and for body tag just overwrite these root variables, working example here: 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);
}