Metatag theme-color not being defined when using the color palette toggle example

[AjaniBilby]

If I just have a static theme colour the correct metatags are generated for every page. However, if you use the colour palette toggle example, no theme colour is generated.

I understand why switching theme colour on the fly based on cached info in the browser could present issues, but it would be nice if the theme colour could be hard set, or if it used the default scheme's primary colour.

[squidfunk]

Thanks for reporting. The problem with adding the theme color for the multi-color-palette configuration is that there can only be a single theme color, as it is set during the build (inside HTML). When a user switches to the other color, you would end up with non-matching theme colors. This is the reason why it's not set in this configuration setting and what you already observed.

Additionally, the theme color must be a hex value, and we set color names in mkdocs.yml, which makes it even more complicated. We would somehow have to encode both theme colors inside the template, only one being active at a time, somehow tying it to different color palettes. Honestly, nothing I'd want to maintain.

You can use theme extension to add this logic if you feel that it's indispensable for you.

[squidfunk]

Adding a footnote is in fact a great idea. We somehow need to distill the argument/reason for that in a few sentences. I currently don't have the time to do it, but I'm happy to collaborate on a PR if you want to go ahead.

[squidfunk]

Hmm, the minute I sent it, it became apparent to me that the theme color might also be out-of-sync when you use a base color, but override the primary color with extra CSS, which several users do. In that case, you would definitely need to extend the theme to override the theme color, as it's currently hard coded. This is also a side effect that might not be apparent. Thus, thinking about it again, it's another argument for removing it altogether and maybe adding a customization guide how to add it. This would also ease maintenance on a project that is already very complex.

[AjaniBilby]

That sounds like some refactoring boiling up in the background there...

[AjaniBilby]

It appears that some CSS named colours do work in theme-color... source
But that appears to be a safari specific issue.

[squidfunk]

Removing it is the best option. Otherwise, we'd need layers and layers of abstraction. I'll think about it a little more and maybe remove it on the weekend + add a guide on how to add it back via theme extension

[almas-x]

add extra javascript

function syncThemeColor() {
    const color = getComputedStyle(document.querySelector("[data-md-component=header]"))['background-color'];
    let metaThemeColor = document.querySelector("meta[name=theme-color]");
    if (!metaThemeColor) {
        metaThemeColor = document.createElement('meta');
        metaThemeColor.name = "theme-color";
        metaThemeColor.content = color;
        document.head.appendChild(metaThemeColor);
    }
    metaThemeColor.setAttribute("content", color);
}

document.querySelectorAll("input[name='__palette']").forEach(function (button) {
    button.addEventListener("change", function () {
        syncThemeColor();
    })
})
syncThemeColor();

[Arthri]

I use overrides/main.html:

{% extends "base.html" %}

{% block extrahead %}

  {% if config.theme.palette %}
    {% set firstPalette = config.theme.palette[0] %}
    {% if firstPalette.primary %}
      {% import "partials/palette.html" as map %}
      {% set primary = map.primary(
        firstPalette.primary | replace(" ", "-") | lower
      ) %}
      <meta name="theme-color" content="{{ primary }}" />
    {% endif %}
  {% endif %}

{% endblock %}

[almas-x]

But by this can not change theme-color meta tag when toggle the color palette

[Arthri]

Yup. It's mainly intended to make twitter embeds have color

[AjaniBilby]

NGL, I notice it more on Chrome mobile, because then the tabs are colour to your theme color

[squidfunk]

The issue is fixed in 944180d. The theme color is now automatically set from JavaScript and always kept in sync with the header. The changes are on the v9 branch, progress is tracked in #4714:

RPReplay_Final1670777188.MP4