squidfunk/mkdocs-material

Social cards are not inheriting the background color

Closed this issue · 4 comments

daelvn commented

Context

I am trying to change the background color of the social cards (community edition) to the primary palette color.

Bug description

The cards generated by the community edition of the social plugin always use the default indigo color, even when theme.palette.primary and plugins.social.cards_layout_options.background_color are set to another value (red in the case of the reproduction).

The documentation does not list plugins.social.cards_layout_options.background_color as an Insiders field. It is mentioned in another issue that Hex codes and other CSS values are Insiders-only. According to the documentation for the default layout, it automatically inherits theme.palette.primary. This does not seem to be true.

Related links

Reproduction

9.5.39-social-cards-not-inheriting-color.zip

Steps to reproduce

  1. Remove the info plugin
  2. Run mkdocs build
  3. Inspect site/assets/images/social
  4. Generated image will have an indigo background color, instead of red

Browser

No response

Before submitting

kamilkrzyskow commented

Hello @daelvn,
have you read this discussion?:

The issue is likely related to the cache as the community version doesn't take those settings into account when evaluating the cache-key. Simply clear the .cache/plugin/social directory to re-generate the images.

daelvn commented

Hi,

I have now read the discussion, and it has fixed the reproduction I sent, but not I could not apply the solution to my project. It seems to not work even deleting .cache when theme.palette.primary is set to custom. I have attached a new reproduction. (I had to manually edit it to remove venv, which was not included in the previous reproduction. It would not let me attach it otherwise)

9.5.39-cards-color-continuation.zip

I imagine the problem here is that the palette color being custom (not the social card configuration), it would have to be pulled from the CSS, which is arbitrary. The documentation does not mention anything about this not being possible. (It does not even mention that setting arbitrary colors in the configuration is reserved for Insiders!). Maybe it should be explicit?

If this is the case, it leaves me in an awkward position where I can't match the social cards to the documentation's color without signing up for Insiders. Is there a workaround for this? Or do I have to settle for the closest predefined palette color? Thank you still.

Edit: I have now noticed that in the discussion you linked, squidfunk mentioned a possible cache invalidation bug. What's the status on this, or the new social implementation meant to come to the community edition?

kamilkrzyskow commented

I haven't run your second example, but the mkdocs.yml file in the 9.5.39-cards-color-continuation.zip doesn't set the social plugin settings.

The social plugin first tries to load the theme.palette.primary color:

mkdocs-material/material/plugins/social/plugin.py

Lines 146 to 149 in 25b2107

# Set colors according to palette
if "primary" in palette and palette["primary"]:
primary = palette["primary"].replace(" ", "-")
self.color = colors.get(primary, self.color)

There is a map of colors:

mkdocs-material/material/plugins/social/plugin.py

Lines 553 to 576 in 25b2107

# Color palette
colors = {
"red": { "fill": "#ef5552", "text": "#ffffff" },
"pink": { "fill": "#e92063", "text": "#ffffff" },
"purple": { "fill": "#ab47bd", "text": "#ffffff" },
"deep-purple": { "fill": "#7e56c2", "text": "#ffffff" },
"indigo": { "fill": "#4051b5", "text": "#ffffff" },
"blue": { "fill": "#2094f3", "text": "#ffffff" },
"light-blue": { "fill": "#02a6f2", "text": "#ffffff" },
"cyan": { "fill": "#00bdd6", "text": "#ffffff" },
"teal": { "fill": "#009485", "text": "#ffffff" },
"green": { "fill": "#4cae4f", "text": "#ffffff" },
"light-green": { "fill": "#8bc34b", "text": "#ffffff" },
"lime": { "fill": "#cbdc38", "text": "#000000" },
"yellow": { "fill": "#ffec3d", "text": "#000000" },
"amber": { "fill": "#ffc105", "text": "#000000" },
"orange": { "fill": "#ffa724", "text": "#000000" },
"deep-orange": { "fill": "#ff6e42", "text": "#ffffff" },
"brown": { "fill": "#795649", "text": "#ffffff" },
"grey": { "fill": "#757575", "text": "#ffffff" },
"blue-grey": { "fill": "#546d78", "text": "#ffffff" },
"black": { "fill": "#000000", "text": "#ffffff" },
"white": { "fill": "#ffffff", "text": "#000000" }
}

But you're using custom, therefore you need to set the values manually in the social plugin options:

mkdocs-material/material/plugins/social/plugin.py

Lines 151 to 156 in 25b2107

# Retrieve color overrides
options = self.config.cards_layout_options
self.color = {
"fill": options.get("background_color", self.color["fill"]),
"text": options.get("color", self.color["text"])
}

The values from the initial theme.palette.primary parsing act as a fallback to the setting set in the social plugin options.

I have now noticed that in the discussion you linked, squidfunk mentioned a possible cache invalidation bug. What's the status on this, or the new social implementation meant to come to the community edition?

squidfunk said:

[...] the new implementation that will soon be released to the community edition.

soon is a rather subjective term 😅 So either there is something being cooked towards putting the improved social plugin inside the community edition in relation to the recent blog post, or squidfunk expects that the funding tier with the improved social plugin will be reached quite fast.

As for proper cache invalidation I was planning to fix it, but this is not a "critical" issue, so I haven't gotten around to it.

You can also check Nype's Brand Site:

Where the custom color is being used:

  • 👍1
daelvn commented

I had gotten the impression from this comment that setting manual CSS colors was not possible without Insiders, when looking for the solution to this issue (which had turned out to be about cache), so I had assumed that trying the CSS color manually was not worth it. After setting it and deleting the cache it finally worked.

Thank you for the information on the cache fix/new social plugin implementation! As well as for the detailed answer. It was very useful in understanding how this worked. I'm marking this as closed now.

  • 👍1
  • 😄1