Switch logo depending on mode

[RickCogley]

Hello - I'd like to have a different logo displayed depending on the selected mode, and tried the following in menu.vto:

  {{ if page }}
    {{ if page.logo_dark }}
      <a class="menu-logo" href="{{ page.url }}">
        <picture>
          <source srcset="{{ page.logo_dark }}" media="(prefers-color-scheme: dark)">
          <source srcset="{{ page.logo }}" media="(prefers-color-scheme: light)">
          <img src="{{ page.logo }}" alt="{{ page.title || slug }}">
        </picture>
      </a>
    
    {{ else }}
      <a class="menu-highlight" href="{{ page.url }}">{{ page.title || slug }}</a>
    {{ /if }}
  {{ /if }}

This works, but is linked to the OS setting the user has, not to the button included in the simple-wiki theme. So if I set my OS preference to "light", the logo switches to the light version for either selected mode, and vice versa if I set my OS preference to "dark". Everything BUT the logo changes when I click the mode switcher button. Apparently there is no "no preference" any longer, either, so if you have selected "auto", the logo just sticks to the default one in the <img> tag.

Any way to make this work do you think?

An additional question: why does it work to assign the logo in the frontmatter of just the top index.md, and the logo appears atop the sidebar for every page?

[oscarotero]

prefers-color-scheme doesn't work here because the user can change to light or dark mode at any time.
The best way to do that is placing the logo using CSS (using background-image), using [data-theme="light"] and [data-theme="dark"] selectors to use right image.