GitHub dark and light mode images

[Michael Brewer]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

GitHub support dark and light mode images via #gh-light-mode-only example:

![Fancy logo](./dark.png#gh-dark-mode-only)
![Fancy logo](./light.png#gh-light-mode-only)

Use Cases

This would allow previewing docs inside of Github natively or on the deployed Github pages.

Screenshots / Mockups

Possibly by adding the following to https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/palette/_scheme.scss:

    // Hide images for light mode
    img[src$="#gh-light-mode-only"] {
      display: none;
    }

    // Show images for dark mode
    img[src$="#gh-dark-mode-only"] {
      display: initial;
    }

and the following to https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_typeset.scss:

  // Hide images for dark mode
  img[src$="#gh-dark-mode-only"] {
    display: none;
  }

[Martin Donath]

Released as part of 8.2.12.