Default scheme colors not used for Social cards when automatic/light dark mode is set

[mitches-got-glitches]

Context

I'm creating a personal blog with mkdocs-material==9.5.14 and the built-in Blog plugin.

Bug description

If I set my palette as the following with a non-default primary color set in the default scheme, then this color isn't used by the social plugin when creating the social cards, it just uses the default.

theme:
  palette:
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: black
      accent: orange
      toggle:
        icon: material/brightness-5
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to system preference

If I repeat the palette colors in the top item under palette, then these are used by the social plugin when creating a card.

theme:
  palette:
    - media: "(prefers-color-scheme)"
      primary: black
      accent: orange
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: black
      accent: orange
      toggle:
        icon: material/brightness-5
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to system preference

If I move the media: "(prefers-color-scheme: light)" item to the top item, then the colors also will be used properly by the social plugin, without the need for repetition.

theme:
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: black
      accent: orange
      toggle:
        icon: material/brightness-5
        name: Switch to dark mode
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to system preference

Suggested solutions

• When selecting the color scheme to socials, search for the media item with schema: default and use those colors. The order of the list in the YAML won't matter with this solution.
• Document the above behaviour in the docs - suggesting either repetition or making sure default scheme is the first item.

Related links

• Reporting a bug
• Automatic light/dark mode

Reproduction

9.5.14-media-palette-unused-socials.zip

I've put in some commented sections so that anyone checking can try all of the light/dark mode suggestions in the docs and confirm this bug.

Steps to reproduce

Using the makefile on Linux...

1. make all (installs imaging dependencies and requirements into a virtual environment
2. Remove - info from the plugins in mkdocs.yml
3. Activate venv with source .venv/bin/activate
4. make docs

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting, and again, thanks for the excellent reproduction and the report + documenting your attempts. Fixed in 66d4500. Now, the social plugin will look for the first palette item that defines a primary color. Your proposed fix to look for the item with the default color would not work for authors that only use slate (dark mode only).

Note that the social plugin has to employ a heuristic to decide what colors to use, and this might not what is expected. For this reason, the social plugin also allows to explicitly set the background_color of the social card:

plugins:
  - social:
      cards_layout_options:
        background_color: black

If you're using Insiders, you can even use CSS colors, including HEX codes or RGB, as mentioned in our documentation:

plugins:
  - social:
      cards_layout_options:
        background_color: "#ffcc00"

[squidfunk]

cae9c18 also ports the fix to new social plugin implementation in Insiders.

[squidfunk]

Released as part of 9.5.15.