Lost custom header color after upgrade to v3.6.0

Plugins & Platform
1

Dear,

I have done a custom theme to customize some elements on the Matomo interface. One of them was related to the header background color. I used for that the less variable @theme-color-header-background. It was working well but not anymore with the upgrade to version 3.6.0. It looks like it’s not used anymore. Looking around, I have seem that the color is set by:

nav { background-color:#37474f !important; }

I did not find how and where to change it (the !important could be anoying in that case).

Any idea?

thx in advance :slight_smile:

2

Hi,

I added

@theme-color-header-background: orange;

to the /stylesheets/theme.less of my Matomo team, cleared the cache and reloaded Matomo and indeed the Header becomes orange.

Can you describe how exactly you are changing the color?

grafik
grafik1904×64 11 KB

3

Hi Lukas!

I have done the same but in my case, it’s not working anymore. Do you have the latest version of Matomo?

Thx!

4

Hi,

I am using the latest git version, but I also tested it on my live server running 3.6.0. and it also works.

Can you check if your theme is still enabled? Or try clearing all caches with

sudo -u www-data php7.2 /var/www/matomo/console core:clear

(or similar) or by deleting the content of the tmp/ folder.

5

My theme is still enabled (I even disabled and re-enabled it). I cleared again the cache. What surprise me is that some other modifications I have done are still used. But none of the modification on the less variables are taken into account (I also changed the variable @theme-color-header-text to #0d0d0d)

6

In the example theme, there is a class extending the plugin class. This does use the following function to override the theme color:

    public function registerEvents()
    {
        return [
            'Theme.configureThemeVariables' => 'configureThemeVariables',
        ];
    }

    public function configureThemeVariables(Plugin\ThemeStyles $vars)
    {
        $vars->fontFamilyBase = 'Arial, Verdana, sans-serif';
        $vars->colorBrand = '#5793d4';
        $vars->colorHeaderBackground = '#FFFFFF';
        $vars->colorHeaderText = '#0d0d0d';
    }

(they did “getListHooksRegistered” but it’s deprecated and so I changed it to “registerEvents”).
When I do the same for my theme, the color gots overridden. So for me it looks like the less files are not used ??

7

In case this still doesn’t work now with 3.7.0 (which changed the header color), please report this bug on Github.

8

This change came with the UI refactor around that release. In 3.6.0 the header color is no longer controlled by @theme-color-header-background, and the navbar color is hard-coded via CSS with !important, which is why your LESS override stopped working.

The usual workaround is to override it in a custom plugin or theme CSS that loads after Matomo’s core styles (for example via plugins/YourPlugin/stylesheets/theme.css) and target the same selector with equal or higher specificity. It’s also worth checking this page in the Matomo developer docs and changelog, as they explain which LESS variables were deprecated and what the supported theming approach is going forward.