Overriding tenant branding in Angular apps now that brandingEntry is deprecated

Forum
1

Hi Cumulocity team,

We are upgrading our application from Angular 15 to Angular 18 using Web SDK v1021.22.112. We are trying to fully override tenant branding for specific apps.

When following the documentation we find tenant branding supersedes our app’s style. This is the guide we followed (using styles.less directly):

As this didn’t work we tried to resolve this in other ways;

Here’s what we’ve tried so far:

  1. Using brandingEntry in cumulocity.config.ts:
brandingEntry: './src/branding/branding.less',

This approach used to work with the old C8y CLI (using package.json), but now it seems to be ignored. None of the variable overrides or styles in branding.less are applied. It also seems to be deprecated:

image

  1. Setting dynamicOptionsUrl to false in cumulocity.config.ts:
dynamicOptionsUrl: false,

Tristan suggested using dynamicOptionsUrl to prevent tenant branding overriding app branding; this also didn’t work – See: How to include branding in Angular 16 with WebSDK - #5 by Tristan_Bastian . Even with this, the tenant branding still appears and overrides our LESS variables.

  1. Manual CSS variable overrides in global styles:
:root,
.c8y-light-theme,
.c8y-dark-theme {
  --brand-primary: #53cd61;
}

This works, but it is not using our LESS branding. We want to continue using branding.less for:

  • Defining LESS variables (e.g., @brand-primary)

  • Using LESS functions (lighten, darken)

  • Keeping a modular, maintainable style system

We also tried scaffolding a fresh tutorial app using Angular 18 + Web SDK 1021.22.112, importing @c8y/style/extend.less and defining our variables in branding.less and styles.less, but the styles are always overridden by the tenant.

If anyone could explain how we can get branding to override tenant branding it would be greatly appreciated. We have spent several days on this. This is for a production system.

Thanks - Harrison