Changing the AppSwitcher color

I have created a custom application with the SDK that uses its own branding to overhaul those set in the tenant settings. My set up is as follows: Angular 14.0.6 and c8ycli 1017.0.385

I want some of my UI elements to become highlighted in a yellow hue whenever the user clicks or hovers over it, as displayed below:

image
image

Everything works fine except for when I select the AppSwitcher icon, then the app switcher switches back to the tenant’s settings.
image

Is there a way to overhaul this setting either in my own application using the branding.less file or somewhere in the tenant settings so that the color of the selected AppSwitcher remains constant?

Thanks

P.S.: Is there a way to change the highlighted color in the navigation menu as well for the selected application?
image

Hi @luclib,

In general, this is basic CSS knowledge and we expect that somebody working with the Web SDK is able to achieve this on their own.

Some hints:
By inspecting the element you want to adjust the styling of via your browsers network tools, you can see the styles currently applied to it. Ensure that the button is in the state where you would like to adjust it’s styling (e.g. dropdown opened or hover state). Now you can check which selector is used for e.g. specifying the color. You should be able to use the same/similar/more specific selector to apply your own adjustments.

The color that is applied to the element might be coming from a CSS variable. In that case you can also try to adjust/set this CSS variable to your desired value.

Regards,
Tristan