Idea: selector based dark mode support

[stereobooster]

Hey 👋 . It's me again. I know I proposed previous version of dark mode https://github.com/remcohaszing/rehype-mermaid/issues/6. But here is one more twist to it.

In case of selector based dark mode (so people can select in the dropdown: dark, light, auto) picture doesn't work. See https://github.com/withastro/starlight/discussions/1829

Maybe we can add option for selector based dark mode. Generated HTML can look like this:

<img id="mermaid-dark-0" class="mermaid-dark" … />
<img id="mermaid-0" class="mermaid-light" … />

And CSS for it can look like this:

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

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

I know this may be too specific request. Up to your consideration

[remcohaszing]

I feel like it would be better to solve this with a new rehype plugin, which changes all responsive <picture> and <video> elements to a class based approach.

[stereobooster]

Yep, makes sense. 👍

[stereobooster]

Just realized that this approach would work for inline-svg strategy

[remcohaszing]

That’s an interesting point. I’m not really sure how I feel about it.

[stereobooster]

Just in case: I do not insist. I see how this can be very specific requirement, which doesn't fit in the project. This was thought out loud