Picture and selector based themes (dark mode)

[stereobooster]

Let's say I have HTML like this

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

And I want that picture would switch dark/light mode depending on the theme (through starlight-theme-select)

At first I thought it would be enought to set color-scheme. It works for buttons, inputs etc. But not for picture... sigh

The only hacky way to do this which I can think of is:

const themeSelector = document.querySelector(
  "starlight-theme-select select"
) as HTMLSelectElement;

if (themeSelector) {
  function flipImageSource(theme: string) {
    document.querySelectorAll("picture").forEach((element) => {
      const img = element.querySelector("img");
      const darkSource = element.querySelector(
        "source[media='(prefers-color-scheme: dark)']"
      ) as HTMLSourceElement | undefined;
      if (!darkSource || !img) return;

      let lightSource = element.querySelector(
        "source[media='(prefers-color-scheme: light)']"
      ) as HTMLSourceElement | undefined;
      if (!lightSource) {
        lightSource = document.createElement("source");
        lightSource.media = "(prefers-color-scheme: light)";
        lightSource.srcset = img.src;
        lightSource.width = img.width;
        lightSource.height = img.height;
        element.prepend(lightSource);
      }

      if (theme === "dark") {
        img.src = darkSource.srcset;
      } else {
        img.src = lightSource.srcset;
      }
    });
  }

  flipImageSource(themeSelector.value);

  themeSelector.addEventListener("change", () => {
    flipImageSource(themeSelector.value);
  });

Is there a better way to do this?

Striclty speaking this is not Starlight specific, basically any project that uses selector based theme would have the same issue. I'm surprised that I haven't find any mentions of this issue anywhere else. Do I miss something?

[stereobooster]

Here is idea from remcohaszing/rehype-mermaid#16 (comment).

Write rehype plugin to transform from

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

to

<img class="dark" ... />
<img class="light" ... />

And then one can add CSS:

html[data-theme="light"] .dark {
  display: none;
}

html[data-theme="dark"] .light {
  display: none;
}

UPD

Starlight already has classes for that

<img class="light:sl-hidden" ... />
<img class="dark:sl-hidden" ... />

[delucis]

I see you found our light/dark classes. That’s how we handle it for things like the logo and hero images. IIRC, when I tested, <picture> with prefers-color-scheme works pretty well in Chrome and Firefox on macOS, but wasn’t working on Safari.

The CSS solution is not 100% ideal because browsers will sometimes initialise downloading the hidden image before they realise it’s hidden. So that can mean a pointless download, but the alternatives (e.g. JS-powered techniques) usually are worse for performance, because the browser may not be able to start preloading an image at all until quite late. So it’s a question of the lesser evil in this case.

[stereobooster]

Firefox on macOS here 👋 . Not working for me (e.g. it doesn't switch picture, when I change value in the Starlight theme switcher). Maybe problem is in my markup 🤔 Can you, please, share example that you tested with?

[stereobooster]

The CSS solution is not 100% ideal because browsers will sometimes initialise downloading the hidden image before they realise it’s hidden.

Does loading=lazy helps?

In my case pictures come from mermaid per-renderer, so they are inlined (src="data:image/svg+xml,...) and it would make no difference. I know it's not ideal. It would be way easier if Mermaid would support styling with css variables. But for now it is what it is

[delucis]

Can you, please, share example that you tested with?

This was quite some time ago, so not sure I have that anymore sorry. Also not impossible I'm confusing this with something similar.

Does loading=lazy helps?

I'd guess it could potentially? Would need testing. In Starlight's case, we use it for site logo and hero images, so wasn't an option for us. But could work ok for diagrams in the main document flow.

[pwespi]

Hello @stereobooster. I came across the same problem. I'm using rehype-mermaid in starlight and would like the diagrams to switch theme based on the starlight theme selection. Have you found a solution?

[stereobooster]

Maybe not ideal, but it works https://astro-digital-garden.stereobooster.com/recipes/mermaid-diagrams-in-markdown/#1-dark-mode