Changing image in footer based on theme

[sccmcca]

I have an image in the copyright section of my partials/footer.html file that I'd like to change based on if light mode or dark mode is selected.

I tried using media="(prefers-color-scheme: dark)" with <picture> in my partials/footer.html file, but that doesn't seem to be compatible with how light mode and dark mode are set up in the Material for MkDocs theme (correct me if I'm wrong!).

The intended behaviour is for dark.png to be displayed when dark mode is selected, and original.png when light mode is selected:

<picture>
  <source srcset="dark.png" media="(prefers-color-scheme: dark)">
  <img src="original.png">
</picture>

I've also looked at the documentation to see if I can assign classes to my images and display: none; in my extra.css depending on which theme is selected. However it doesn't seem like adding new classes within [data-md-color-scheme="default"] { } and [data-md-color-scheme="slate"] { } works. As far as I can tell, only the predefined CSS variables are allowed.

Lastly, I tried using the conventional @media (prefers-color-scheme:" ") { } in my extra.css, but I assume [data-md-color-scheme=" "] { } overrides that method?

Any pointers on how to achieve different images in the footer based on the theme would be great! Thanks.

[squidfunk]

Hash fragments are probably what you're looking for – just add them at the end of the URL in src.
https://squidfunk.github.io/mkdocs-material/reference/images/#light-and-dark-mode

[ssbarnea]

@squidfunk I got bit surprised to see that the footer is dark even when on light more. My expectation was that the footer would change to light mode too when switching modes. This sounds like a bug to me but I guess you might have another view on it.

[squidfunk]

The dark footer in light mode predated dark mode by several years. It's not a bug, but a design decision to be in-line with the Material Design guidelines v1. Also, if it doesn't fit your taste, customization is trivial via CSS variables:

mkdocs-material/src/templates/assets/stylesheets/main/_colors.scss

Lines 134 to 139 in 406a3ad

	// Footer color shades
	--md-footer-fg-color: hsla(0, 0%, 100%, 1);
	--md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
	--md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.45);
	--md-footer-bg-color: hsla(0, 0%, 0%, 0.87);
	--md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);