dark logo

[gordonwoodhull]

We haven't connected dark mode to brand.logo.*.dark.

We also need to connect it to brand.dark.logo.*.dark.

Implementing dark mode should be much the same as renderings: [light, dark]: we insert both images and add .light-content, .dark-content to them.

Favicons are different. Worst case we add both and then disable one <link /> in JavaScript the way we do with stylesheets, but maybe there is a better way.

(It might make more sense to use the prefers-color-scheme media query for favicons because they’re outside the page and should follow system preferences.)

[gordonwoodhull]

I didn't get around to implementing a "please wait" apology error for not having dark logo in 1.7. (It is still a good idea to have warnings and errors for things we know aren't implemented yet.)

• Insert both light & dark logos with .light-content and .dark-content classes in the places where logos are used
• Resolve light and dark logos in the same way as unified light and dark brand.yml unified light and dark brand.yml syntax #12797, resulting in light and dark brands that only have light or dark logos respectively. This is a breaking internal metadata change, but it never worked - we only used the light logo. We don't expect that extension writers were using this yet, but we can search and open courtesy issues if there are any.

These are postponed:

• light and dark brand logo shortcode #13004 Brand logo shortcode already has a not-functional light / dark parameter as a stopgap in brand logo shortcode takes brandMode #12566. Let's make it work automatically by finding the correct light or dark logo and adding .light-content or .dark-content. When not specified, and dark mode is enabled, insert both. @mcanouil's example below will become just {{< brand logo my-logo >}}
• light and dark favicon #13005 dark or light favicon

[mcanouil]

FYI, One of the workarounds I've been using lately:

edit: use .light-content and .dark-content

format:
  html:
      toc-title: "[{{< brand logo my-logo light >}}]{.light-content}[{{< brand logo my-logo dark >}}]{.dark-content}"
      toc-location: left
      theme:
        light:
          - litera
          - brand
        dark:
          - litera
          - brand