Service Worker diagram (and maybe others) aren't visible in dark-mode

[aryanpingle]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

What specific section or headline is this issue about?

Custom responses to Requests

What information was incorrect, unhelpful, or incomplete?

The service worker fetch diagram is really cool, but is sadly kinda broken when viewing the page in dark-mode. Attaching the SVG here, you can see the problem on GitHub's dark-mode:

What did you expect to see?

Icons, text and background with the proper color and contrast appropriate for the page's dark-mode.

Do you have any supporting links, references, or citations?

This section contains the SVG in question

Do you have anything more you want to share?

You can inject a style directly into the SVG so that it changes its colors for a dark-mode enabled page. Something simple like:

<svg>
    <style>
        html.dark {
            /* make the colors white or something */
        }
    </style>
    
    <!-- Normal SVG here -->
</svg>

[wbamberg]

Possibly fixed by mdn/yari#9863 ?

[aryanpingle]

Yep I guess so! Just wanna mention that that PR suggests making the background white, but it'll be a much cleaner interface if you can dynamically re-color the SVG content based on the dark-mode preference.

[Josh-Cena]

Unfortunately the SVG is always included via <img> so AFAICT it cannot be aware of the current page's state. Being able to inline SVGs would unlock so many useful use cases though; for example, https://github.com/orgs/mdn/discussions/358

[wbamberg]

Yep I guess so! Just wanna mention that that PR suggests making the background white, but it'll be a much cleaner interface if you can dynamically re-color the SVG content based on the dark-mode preference.

It might be best to suggest this in mdn/yari#9863 . But I imagine recoloring might get tricky, for example if recolored-to-white text then doesn't look good alongside some other color. I suppose what would be best would be a consistent design system for diagrams but we are so far from that.

[aryanpingle]

@Josh-Cena you're right, just tried it out and SVG's loaded via <img> can't query the page state.

Another possible solution is to have an optional dark-mode-svg that is loaded only when the user is using/toggles the dark-mode theme. That way it could be incrementally adopted - only SVGs that really need them can have the dark-mode variant, and you won't have to worry about every other svg.

... but I can only imagine how many build system changes that would entail, so probably not an urgent issue. Y'all can close this issue, hopefully mdn/yari#9863 gets merged soon 🤞

[Josh-Cena]

We (I, at least) would definitely want to address the dark mode image theming. I would prefer the SVG itself to be inlined, so we can do fun things with it, but a GitHub-style themed image would be cool, too.