Changing colours of the SideMenu that comes with cuba

Support
#1

Good day,

I have generated a main screen with responsive side menu. I am trying to change the colors of the side menu to colors that would go along with company colors instead of the default dark grey.

I have tried extending my theme, now using hover and specified my own CSS which I then apply to the css layout in the main screen but this is not working out well for me.

Is there a way that i can access the default css file of the side panel and just change whatever i want to change on the layout from there?

Please provide me with an example

Thank you in advance.

#3

Hello @Indileni,

What theme are you using in your project?

With the help of the Studio, you can find all the theme variables and change the ones you need (documentation).
Take a close look at the following theme variables:

  • $cuba-sidemenu-background-color
  • $cuba-sidemenu-title-background-color

Regards,
Gleb

#5

Good day @durygin

Thank you for the reply.
I am using hover theme.
I tried changing $cuba-sidemenu-background-color and $cuba-sidemenu-title-background-color, build and run the project but the colour is not changing on the applications.

Do you perhaps know why this is happening?

Capture

#6

@Indileni you could try to run the deployThemes gradle task and then reset your browser cache (Ctrl+Shift+R).

Regards,
Gleb