Fixed 2.2 regression: Can't leave theme-color unset

Kirby

Well-known member
Licensed customer
Affected version
2.3.10
XenForo 2.2 PAGE_CONTAINER had the following code

Code:
<xf:if is="property('metaThemeColor')">
    <meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
</xf:if>

So if style property metaThemeColor was empty no meta tag was generated at all so the browser used its defaults.

In XenForo 2.3 the code has changed to
Code:
<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>

With this code it is no longer possible to not generate the meta tag, eg. a theme color is always set and it is not possible to use browser default.

Possible Workaround
Code:
<xf:if is="$xf.style.isVariationsEnabled()">
    <xf:if is="$xf.visitor.style_variation">
        <xf:if is="property_variation('metaThemeColor', $xf.visitor.style_variation)">
            <meta name="theme-color" content="{{ parse_less_color(property_variation('metaThemeColor', $xf.visitor.style_variation)) }}" />
        </xf:if>
    <xf:else />
        <xf:if is="$xf.style.hasAlternateStyleTypeVariation()">
            <xf:if is="property_variation('metaThemeColor', 'default')">
                <meta name="theme-color" media="(prefers-color-scheme: {{ $xf.style.getDefaultStyleType() }})" content="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
            </xf:if>
            <xf:if is="property_variation('metaThemeColor', $xf.style.getAlternateStyleTypeVariation())">
                <meta name="theme-color" media="(prefers-color-scheme: {{ $xf.style.getAlternateStyleType() }})" content="{{ parse_less_color(property_variation('metaThemeColor', $xf.style.getAlternateStyleTypeVariation())) }}" />
            </xf:if>
        <xf:else />
            <xf:if is="property('metaThemeColor')">
                <meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
            </xf:if>
        </xf:if>
    </xf:if>
<xf:else />
    <xf:if is="property('metaThemeColor')">
        <meta name="theme-color" content="{{ parse_less_color(property('metaThemeColor')) }}" />
    </xf:if>
</xf:if>
Smth. like this would at least allow to have directly empty style property metaThemeColor to skip outputting the meta tag.
 
Kinda relatd issue:

If this is fixed as well the template code could be changed to smth. like
Code:
<xf:macro id="theme_color" arg-media="" arg-themeColor="!">
    <xf:if is="$themeColor">
        <meta {{ $media ? 'media="' . $media . '" ' : '' }}name="theme-color" content="{$themeColor}" />
    </xf:if>
</xf:macro>

<xf:if is="$xf.style.isVariationsEnabled()">
    <xf:if is="$xf.visitor.style_variation">
        <xf:macro id="theme_color" arg-themeColor="{{ parse_less_color(property_variation('metaThemeColor', $xf.visitor.style_variation)) }}" />
    <xf:else />
        <xf:if is="$xf.style.hasAlternateStyleTypeVariation()">
            <xf:macro id="theme_color" arg-media="(prefers-color-scheme: {{ $xf.style.getDefaultStyleType() }})" arg-themeColor="{{ parse_less_color(property_variation('metaThemeColor', 'default')) }}" />
            <xf:macro id="theme_color" arg-media="(prefers-color-scheme: {{ $xf.style.getAlternateStyleType() }})" arg-themeColor="{{ parse_less_color(property_variation('metaThemeColor', $xf.style.getAlternateStyleTypeVariation())) }}" />
        <xf:else />
            <xf:macro id="theme_color" arg-themeColor="{{ parse_less_color(property('metaThemeColor')) }}" />
        </xf:if>
    </xf:if>
<xf:else />
    <xf:macro id="theme_color" arg-themeColor="{{ parse_less_color(property('metaThemeColor')) }}" />
</xf:if>

to only output the meta tag if there aactually is a valid parsed color value.
 
Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.3.11).

Change log:
Skip emitting the theme-color meta tag when the style property is empty, so admins can opt out and let the browser use its default.
There may be a delay before changes are rolled out to the XenForo Community.
 
Back
Top Bottom