Change background color menu app bar

I am trying to change background color of menu app bar, without success. Extenting Halo theme, I added

/* Define your theme modifications inside next mixin */
@mixin com_osl_app-halo-ext {
    $cuba-menubar-background-color: #444444;
}

but not work.
can someone provide a sample on framework 7 ?

thanks

Hi,
I use also my own menu color - I’m using the following expression:

$cuba-default-menubar-background: #009759;

It’s working for me with Cuba 6 and 7

Regards,
Steven

I think that there is a problem on studio or framework. I created new custom theme and I used
$cuba-default-menubar-background
but color doesn’t change.
Also extending a theme and apply few changes, like in documentation, nothing change:
https://doc.cuba-platform.com/manual-7.0/web_theme_extension.html

At last a created the new custom theme hover dark like follow doc.
https://doc.cuba-platform.com/manual-7.0/web_theme_creation.html
and magically, all themes created previous are started working good, also
even those where I used the keyword $cuba-menubar-background-color.

I’ve already seen this problem on a couple of new projects, so is easily reproducible.

Hi,

All theme variables must be defined in the hover-ext-defaults.scss file. Do not set them inside of com_osl_app-halo-ext mixin. It is too late, because all the framework SCSS file are already imported and processed at this point.

Yes I know Yuiy, my first post was wrong. I defined variable into hover-ext-defaults.scss, but is not that the problem.

Did you extend the correct theme? By default projects on 7+ use Hover theme, and you should extend hover to apply your modifications.

image

I confirm. I created a new application, extended halo, set attribute
$cuba-default-menubar-background: #009759;
into hover-ext-defaults.scss
and not change

What did you exactly extend? Halo or hover?

Halo, but I don’t think is theme type.

And what theme do you actually use in the application? Could you share your test project?

Default theme of new applications is Hover.

Just to clarify this: the property affects only horizontal menubar, not SideMenu panel.

Maybe is a cache browser probl, I deleted cache and I seen changes