# How to include branding in Angular 16 with WebSDK

**URL:** <https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311>\
**Category:** Forum\
**Tags:** Angular, web-sdk, cumulocity\
**Created:** [May 6, 2024, 2:20pm UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311 "2024-05-06T14:20:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![David.Richter](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@David.Richter](https://community.cumulocity.com/u/David.Richter)\
**Post date:** [May 6, 2024, 2:20pm UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311/1 "2024-05-06T14:20:12Z")

</div>

I migrate a old Angular Cumulocity App from Angular 12 up to Angular 16. After many refactoring the app works mostly like before. Now I stuck with the styling. The app looks different from before.

# What problems I have?

For example lets look at the footer. This is how the footer looks before:  
 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/5/1/51ddddf13b9d0e1bde830029d0cbf06dd45e7f99.png)

Now the footer looks like this  
 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/4/6/466c9116a623a73473c59af3d732a700ab0c5617.png)

When I try to check where the old color comes from and where the new color comes from I see this for the old version:  
 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/2/3/2376d25ad0e9f9af9ee48e45f7a5eb0b2bcd9dc1.png)  
It looks like the color comes from the branding.

In the new file the red color comes from somewhere else

 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/a/7/a73693f74400d3a324846fb796cc6ad7d66e204b.png)  
When I deactivate the first section the second blue colored section get activated with the same red color. When I also deactivate this the text become blue. I don’t know where this \_scaffolding.less comes from where it’s its styling from.

# Branding

We had defined a branding in our old app. This includes images and many less files.

```auto
src/
├── app/
└── assets/
    └── branding/
        ├── img/
        ├── branding.less
        ├── customStyle.less
        ├── customerName-color.less
        ├── material.min.less
        └── variables.less

```

The branding.less looks like this

```auto
@import "@c8y/style/extend.less";
@import "./customerName-color";
@import "./material.min.less";
@import "./variables.less";
@import "./customStyle.less";

```

and is includes in the angular.json  
projects → cockpit-app → architect → build → options → `"styles": ["src/styles.less", "src/assets/branding/branding.less"]`

**customerName-color.less**  
Defines some color varibales from the customers branding.

**material.min.less**  
Styles some of the material components. It was created with this tool [https://materialtheme.arcsine.dev/](https://materialtheme.arcsine.dev/)  
I’m not sure if everything in this file still will work after migration to Angular 15 with the new material design components (MDC).

**variables.less**  
This file seams to define some variables that should be used by the branding system!? It looks like this:

```auto
/* COLORS */
@brand-color: @customerName-red-button; // main color
@brand-primary: @brand-color;
@brand-complementary: #a8b3b5;
@brand-dark: #00f;
@brand-primary-light: lighten(@brand-primary, 20%);

...

@font-family-ration-display-book: "RationalDisplay-Book";
@font-family-base: @font-family-ration-display-book;
@headings-font-family: @font-family-ration-display-book;
@navigator-font-family: @font-family-ration-display-book;

```

It used variables from the customerName-color.less file.

**customStyle.less**  
Set styling for many custom components that developed by us. Its also set styling for c8y-components like `.c8y-ui-action-bar`.

**Additional information**  
We are on angular 16.2.0 with version 1019.21.1 of c8y. We use bootstrap components from ngx-components out of c8y. We use material components and we have our own components.

Do I need [https://www.npmjs.com/package/@c8y/style](https://www.npmjs.com/package/@c8y/style) for branding?  
Where \_scaffolding.less comes from?  
Where to say my angular app to use this branding?

---

<div class="post-metadata">

**Author:** ![David.Richter](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@David.Richter](https://community.cumulocity.com/u/David.Richter)\
**Post date:** [May 7, 2024, 7:35am UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311/2 "2024-05-07T07:35:38Z")

</div>

Additional to this topic:

Before we started the appliation with argument `--app.brandingEntry="./branding/mybranding.less"`. In the description of [how to upgrade to Angular 16](https://cumulocity.com/docs/web/upgrade/#upgrading-to-angular-16) nothing talk about how to migrate the branding.

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [May 7, 2024, 8:14am UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311/3 "2024-05-07T08:14:08Z")

</div>

Hi @David.Richter,

you can specify the [`brandingEntry` application option](https://resources.cumulocity.com/documentation/websdk/ngx-components/classes/ApplicationOptions.html#brandingEntry) as part of the `buildTime` options in your `cumulocity.config.ts` file.

The branding process is described here: [Styling by extending @c8y/style](https://cumulocity.com/docs/web/application-configuration/#styling-by-extending-c8ystyle)

A sample branding, setting a different primary color would look like this:

```auto
@import '~@c8y/style/main.less';

:root {
  --brand-primary: red;
}

```

You can find the available variables listed here: [codex](https://styleguide.cumulocity.com/apps/codex/#/ui-guidelines/foundations/design-tokens/branding/overview)

---

<div class="post-metadata">

**Author:** ![David.Richter](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@David.Richter](https://community.cumulocity.com/u/David.Richter)\
**Post date:** [May 7, 2024, 11:37am UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311/4 "2024-05-07T11:37:17Z")

</div>

Ok this helps a little bit.  
I add new our branding into the `buildTime` configuration in my `cumulocity.config.ts` and I can see that it try to use this settings.  
First I add

```auto
:root {
  --brand-primary: blue;
}

```

Nothing get blue. Everything is still red.  
When I check the applied styling I see this:  
 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/6/3/630843a0cd93901a0cf1dc5f21813f0db701ac77.png)

When I deactivated it my stuff get blue via my branding:  
 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/6/a/6a2e35c56befcb957ad3eef8658ed50619d4d312.png)

The next think I try was to add `!important`: `--brand-primary: blue !important;`  
As I expect the blue takes effect. But this could not be the way to put everythere an `!important`. Then I try something else:

```auto
:root {
  --c8y-brand-primary: green;
}

```

And new all stuff is green. It look like `--c8y-brand-primary` is higher then` --brand-primary`.

Why you import `main.less` and not `extend.less`? What is the difference between `@c8y/style/main.less` and `@c8y/style/extend.less`? When I have to use what?  
Why is `--c8y-brand-primary` working and why not `--brand-primary`?

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [May 7, 2024, 11:59am UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311/5 "2024-05-07T11:59:33Z")

</div>

My guess would be that you have some sort of branding applied to your tenant.  
You can check the branding that is currently applied to your tenant via: `https://<tenantDomain>/apps/public/public-options/options.json`  
This is probably containing the `brand-primary` variable somewhere and that one is set to `#D73237`.

In case you don’t want the tenants branding to be applied to your application you can remove the [dynamicOptionsUrl](https://resources.cumulocity.com/documentation/websdk/ngx-components/classes/ApplicationOptions.html#dynamicOptionsUrl) in your `cumulocity.config.ts` file.

The `c8y-` prefixed variables are used internally, but should not be used by you.

---

<div class="post-metadata">

**Author:** ![David.Richter](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@David.Richter](https://community.cumulocity.com/u/David.Richter)\
**Post date:** [May 10, 2024, 1:31pm UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311/6 "2024-05-10T13:31:50Z")

</div>

Thank for your answer. I removed dynamicOptionsUrl. Now I can define all the stylings which take a while to let it look like before.  
I found some variables that not in the list from [Codex](https://styleguide.cumulocity.com/apps/codex/#/ui-guidelines/foundations/design-tokens/branding/overview). I try for example to change the hover color of links. There is one option in the [Codex](https://styleguide.cumulocity.com/apps/codex/#/ui-guidelines/foundations/design-tokens/branding/overview) which is called `--link-hover-color` and should effect `--c8y-link-hover-color`. But my links not change color like I setup. When I check which color links have I found this:  
 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/f/9/f97aeb2717e8b79518f27d989b2ba3e6645b599c.png)

When I activate hover it look like this  
 ![grafik](https://europe1.discourse-cdn.com/flex005/uploads/cumulocity/original/3X/4/6/464ccd19ea027fd8c2fc6acc77db0b842a367183.png)

The element I should style is --c8y-root-component-color-link-hover instead of `--c8y-link-hover-color`. For this there is no equivalent tag.

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [November 6, 2024, 1:32pm UTC](https://community.cumulocity.com/t/how-to-include-branding-in-angular-16-with-websdk/3311/7 "2024-11-06T13:32:31Z")

</div>

Closed on November 6, 2024, 1:32pm UTC

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.