Idea: selector based dark mode support

[stereobooster]

Hey 👋 . It's me again. I know I proposed previous version of dark mode #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 withastro/starlight#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

[kosratdev]

Are there any updates regarding this feature?

[altano]

Are there any updates regarding this feature?

@kosratdev https://justinmayer.com/posts/any-updates/

[remcohaszing]

@altano makes a good point. It’s generally discouraged to ask for updates. Personally, however, I sometimes appreciate the nudge.

---

In the future, it will probably be possible to toggle dark mode natively using navigator.PreferenceManager. This should be the way forward eventually.

---

It’s possible today to create a rehype plugin to transform

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

Into

<img class="dark" src="a">
<img class="light" src="b">

---

I don’t have a nice solution for the inline-svg strategy yet. Perhaps the best solution would actually be for Mermaid to support responsive dark mode in their diagrams instead of supporting it here.

[jemand771]

I hacked this suggestion together on my end for use in an astro starlight project, maybe it's of use to someone. It's probably incomplete, wrong, or non-ideal in many ways, but for my use case, it works:

src/rehype-responsive-mermaid.ts

import type { Properties, Root, RootContent } from 'hast';


export default function rehypeResponsiveMermaid() {
    return (tree: Root) => {
        tree.children = tree.children.map(replace);
    };
}

function replace<T extends RootContent>(element: T): T {
    if (
        element.type === "element"
        && element.tagName === "picture"
        && hasTwoElements(element.children)
        && element.children[0].type === "element"
        && element.children[0].children.length === 0
        && element.children[0].tagName === "source"
        && element.children[1].type === "element"
        && element.children[1].children.length === 0
        && element.children[1].tagName === "img"
    ) {
        const { srcset: dark, media: _, class: darkClass, ...darkProperties } = element.children[0].properties;
        const { src: light, class: lightClass, ...lightProperties } = element.children[1].properties;
        element.children = [
            {
                type: "element",
                tagName: "img",
                children: [],
                properties: {
                    ...darkProperties,
                    src: dark,
                    class: addClass(darkClass, "light:sl-hidden"),
                },
            },
            {
                type: "element",
                tagName: "img",
                children: [],
                properties: {
                    ...lightProperties,
                    src: light,
                    class: addClass(lightClass, "dark:sl-hidden"),
                },
            }
        ]
    }
    if(element.type === "element")
        element.children = element.children.map(replace);
    return element;
}

function hasTwoElements<T>(l: T[]): l is [T, T] {
    return l.length === 2;
}

// I doubt any of these other than null, undefined and string would ever happen, but who knows
type ClassType = Properties[keyof Properties];

function addClass(existing: ClassType, add: string): string {
    return [...toClassList(existing), add].join(" ");
}

function toClassList(classProperty: ClassType): string[] {
    if (classProperty === null || classProperty == undefined)
        return [];
    if (typeof classProperty === "string")
        return [classProperty];
    if (typeof classProperty === "number" || typeof classProperty === "boolean")
        return [classProperty.toString()];
    if (Array.isArray(classProperty))
        return classProperty.map(x => x.toString());
    throw Error(`invalid preexisting class on element: ${classProperty}`)
}

astro.config.mjs

import rehypeMermaid from 'rehype-mermaid';
import rehypeResponsiveMermaid from './src/rehype-responsive-mermaid';

and inside defineConfig:

  markdown: {
    rehypePlugins: [
      [
        rehypeMermaid,
        {
          strategy: "img-svg",
          dark: true,
          mermaidConfig: {
            // astro default
            fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,",
          }
        }
      ],
      rehypeResponsiveMermaid,
    ],

No broader context as the actual repo using this is private, sorry. If I was less lazy I'd publish this to npm, but oh well.

[remcohaszing]

Nice @jemand771, I like it. A few tips:

1. Use unist-util-visit-parents to iterate over the tree. It handles recursion for you. unist-util-visit is fine too, but since it uses unist-util-visit-parents, you might as well use that. This may also handle corner cases you didn’t think of. An example is MDX compatibility.
2. You should use the className property, not class. class may work, but it’s technically incorrect and may cause problems with other plugins.
3. The className property should be an array, not a string.
4. Boolean attributes should not be serialized to a string. Example boolean attributes are <input disabled> and <div hidden>.
5. <source> and <img> elements are void. Their child count is always 0, no need to check that, but also no harm.
6. You didn’t check if the media query actually means dark mode.
7. I generally recommend early returns over complex boolean logic in a single if-statement. This is just stylistic nit though.

[hasparus]

I don't have a nice solution for inline-svg

@remcohaszing, isn't inline-svg dark mode friendly by default? like this

{
  mermaidConfig: {
    theme: "null",
    themeCSS: `
      .node rect {
        fill: var(--mermaid-node-fill);
        stroke: var(--mermaid-node-stroke);
      }
    `
  }
}

great package BTW, helped me drop mermaid and cytoscape from the bundle <3 huge thanks

[remcohaszing]

If that works, it’s great. Is that solution endorsed anywhere by Mermaid? I don’t see it in https://mermaid.js.org/config/theming.html.