Theming on Multi-Site scenario?

Question

We're trying to implement Spartacus on an existing Project and now facing the issue to provide different styles for each existing base site (for example "electronics", "appearal"). So distinguished by the URL we can access each base sites content (electronics.local:4200 and appearal.local:4200 are served by the same app but have different content). How to configure different styles like in the accelerator by setting the theme property in CMS (backoffice) for each basesite in Spartacus?

Thanks in advance!

Answer 1

With some kind help from the spartacus slack channel I've came to a solution that is quiet solid but not linked directly to the theme property of a base site from CMS (backoffice). It is just retrieving current BaseSite and according to that adds a class to cx-storefront tag in app.component.

app.component.ts:

export class AppComponent {
  public $activeSite: Observable<string> = this.baseSiteService.getActive();

  constructor(
    private baseSiteService: BaseSiteService
  ) {
  }
}

app.component.html:

<ng-container *ngIf="$activeSite | async as activeSite">
  <cx-storefront [ngClass]="activeSite"></cx-storefront>
</ng-container>

Now I've got a css-class equal to current BaseSite UID in the cx-storefront dom element and am able to apply my styles accordingly:

<cx-storefront class="electronics stop-navigating" _ngcontent-ipq-c296="" ng-reflect-ng-class="electronics" tabindex="0">