XF 2.3 Is there a way to change Android Navigation bar color?

frm

Well-known member
Licensed customer
There's a style option metaThemeColor, which I presume is supposed to do just that, but it doesn't.

Other finds are hard coding
HTML:
<meta name="theme-color" content="">
to set the color to inherit from.

But, in doing so, that would remove the built in light/dark mode, and may mess up light mode to display darker, if you wanted to just be constrained to a light style, as that is already defined in PAGE_CONTAINER.

As you can see from the screenshot, it makes navigation page-to-back, home screen viewing, or tabbing difficult on Android, even on here.

I've tried workarounds that don't compromise style-switching without luck.

Edit: This isn't an issue on dark mode.
 

Attachments

  • Screenshot_20260427_125040_Chrome.webp
    Screenshot_20260427_125040_Chrome.webp
    75.8 KB · Views: 9
  • Screenshot_20260427_125617_Chrome.webp
    Screenshot_20260427_125617_Chrome.webp
    58.6 KB · Views: 8
From my original post to now, it looks like this was changed on XenForo (I did not check the HTML prior to noticing the darker bar on the light screen to compare).
HTML:
<meta name="theme-color" content="#0f578a" />

Can the entirety of this in PAGE_CONTAINER be rewritten to just that, or will a fix be issued?
HTML:
    <xf:if is="$xf.style.isVariationsEnabled()">
        <xf:if is="$xf.visitor.style_variation">
            <meta name="theme-color" content="{{ parse_less_color(property_variation('metaThemeColor', $xf.visitor.style_variation)) }}" />
        <xf:else />
            <xf:if is="$xf.style.hasAlternateStyleTypeVariation()">
                <meta name="theme-color" media="(prefers-color-scheme: {{ $xf.style.getDefaultStyleType() }})" content="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
                <meta name="theme-color" media="(prefers-color-scheme: {{ $xf.style.getAlternateStyleType() }})" content="{{ parse_less_color(property_variation('metaThemeColor', $xf.style.getAlternateStyleTypeVariation())) }}" />
            <xf:else />
                <meta name="theme-color" content="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
            </xf:if>
        </xf:if>
    <xf:else />
        <meta name="theme-color" content="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
    </xf:if>
 
Back
Top Bottom