Social cards theme behavior

[FlagHunter01]

Hey!

I didn't want to create an issue as the problem might stem from a lack of understanding on my part.

When I use the automatic light/dark toggle, social cards are always blue. I can of course override it with background_color, but it should be theme.palette.primary by default.

If this is indeed a bug and not a configuration problem on my part, my guess is that the auto toggle removes the primary and accent attributes from the palette field, and the social cards generator doesn't know what color to pick and goes for blue.

[kamilkrzyskow]

Hello @FlagHunter01,
the default fallback is to use the indigo colors, so the blue tint like you said. However, it does get later overridden with the theme.palette.primary if palette is defined as a dict key:value pairs, if it's defined as a list it uses the settings from the first entry.

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

Line 73 in a6286ef

self.color = colors.get("indigo")

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

Lines 115 to 127 in a6286ef

	# Retrieve palette from theme configuration
	theme = config.theme
	if "palette" in theme:
	palette = theme["palette"]
	# Use first palette, if multiple are defined
	if isinstance(palette, list):
	palette = palette[0]
	# Set colors according to palette
	if "primary" in palette and palette["primary"]:
	primary = palette["primary"].replace(" ", "-")
	self.color = colors.get(primary, self.color)

So perhaps your first list entry doesn't have the primary setting defined 🤔
Or perhaps you created the config, then it generated the images with the blue background, then you changed the settings and you didn't clear the cache, and it's still blue.

Working example: palette-auto.zip

[FlagHunter01]

Thanks for the reply!

So perhaps your first list entry doesn't have the primary setting defined 🤔

Yep, I think that's it. As of my understanding, without the toggle, the palette looks like this:

palette:
    - primary

However, with the toggle enabled, it looks like this:

palette:
    - media: "(prefers-color-scheme: light)"
        - primary 
    - media: "(prefers-color-scheme: dark)"
        - primary

Any attempt to add a "primary" argument in front or behind the "media" arguments are met with an error. So I indeed don't have a "primary" argument listed directly in palette :(

[kamilkrzyskow]

Check the example zip:

    # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      primary: white
      accent: yellow
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode

[FlagHunter01]

My bad, I understand now. Thanks a lot!