Mobile Address Bar Color

tank · March 18, 2019, 6:07pm

Hi.

I was hoping someone could help me figure out where I could change the mobile address bar color (from blue to something else)?

Usually, I would add:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

To the header somewhere, but I am totally stuck trying to figure out how to change the color to match my brand.

Thank you for your time.

-tank

Lukas · March 19, 2019, 9:43am

I think this is hardcoded here:

github.com

matomo-org/matomo/blob/cb5453316711264b07b89a7077b51404a189aa98/plugins/Morpheus/templates/layout.twig#L25

      
        
                    <meta name="generator" content="Matomo - free/libre analytics platform"/>
                    <meta name="description" content="{% block pageDescription %}{% endblock %}"/>
                    <meta name="apple-itunes-app" content="app-id=737216887" />
                    <meta name="google" content="notranslate">
                    {% block meta %}
                        <meta name="robots" content="noindex,nofollow">
                    {% endblock %}
            
            
        {% include "@CoreHome/_favicon.twig" %}
                    {% include "@CoreHome/_applePinnedTabIcon.twig" %}
                    <meta name="theme-color" content="#3450A3">
                    {% include "_jsGlobalVariables.twig" %}
                    {% include "_jsCssIncludes.twig" %}
            
            
        {%- if not isCustomLogo %}<link rel="manifest" href="plugins/CoreHome/javascripts/manifest.json">{% endif %}
            
            
    {% endblock %}
            </head>
            <body id="{{ bodyId|default('') }}" ng-app="app" class="{{ bodyClass|default('') }}">
            
            
{% block body %}

I created an issue about it.

github.com/matomo-org/matomo

Make theme-color themeable

opened 09:42AM - 19 Mar 19 UTC

closed 09:14PM - 01 Apr 19 UTC

Findus23

Help wanted c: Design / UI

Many people theme their Matomo instance to be more on brand, but when the main n…avbar color is changed, mobile phones still show the default blue color as it is hard-coded here: https://github.com/matomo-org/matomo/blob/cb5453316711264b07b89a7077b51404a189aa98/plugins/Morpheus/templates/layout.twig#L25 It would be great if there was a way to modify this value without copying the whole template (which may cause issues after updates)

Lukas · April 2, 2019, 8:22am

@tank

Your wish has been granted