Default styling is broken under Chrome's Automatic Dark Mode feature

[ssokolow]

I'm not familiar enough with SVG to be certain whether it's a "Rule #­1 of CSS: Always set either both the foreground and background color or neither" violation, some kind of z-index bug, or something else entirely.

[mert-kurttutan]

It seems like Chrome's Automatic Dark Mode is able to invert color of text but not (fill) color of ellipse shape.
I am not sure if layout can do anything here to fix this. Maybe, one can embed style setting regarding dark mode inside the output svg.

Can you also try this svg, an output from official dot engine?

<svg width="62pt" height="44pt" viewBox="0.00 0.00 62.00 44.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 40)">
<polygon fill="white" stroke="none" points="-4,4 -4,-40 58,-40 58,4 -4,4"/>
<!-- B -->
<g id="node1" class="node">
<title>B</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-13.8" font-family="Times,serif" font-size="14.00">Bee</text>
</g>
</g>
</svg>

[ssokolow]

The official dot output is even worse, showing up as a white square.

However, both work if I use the DOM inspector to apply the same Inkscape-inspired solution I did for my svgbob rendering... use fill: none; or fill: transparent as the default.

Your current approach also breaks for plain old dark CSS themes, but with the opposite failure mode, as demonstrated if I quickly edit --text-bg and --text-color in my theme. (Ignore the code block remaining light. My Syntect integration is currently very primitive.)

[mert-kurttutan]

Then, one solution is to introduce new api with configurable background color scheme with an option to choose transparent background you've just shown, while still sticking to white background to follow the official dot engine

[ssokolow]

I'd appreciate that. Ideally in a form flexible enough that I can selectively choose to use the currentColor keyword and integrate my inlined SVG with the host document's theme even more smoothly.

[mert-kurttutan]

@ssokolow Can you try this issue with my color branch, see how does it look?
or you can just add the following inside of your ... to get the equivalent result:

<rect width="100%" height="100%" fill="white" />

[ssokolow]

Can you try this issue with my color branch, see how does it look?

I think you forgot to push it. I only see master.

or you can just add the following inside of your ... to get the equivalent result:

That'd make things more difficult rather than less when I implement prefers-color-scheme-based dark mode support.

[mert-kurttutan]

Can you try this issue with my color branch, see how does it look?

I think you forgot to push it. I only see master.

What do you mean? here is the link for the branch: https://github.com/mert-kurttutan/layout/tree/color

[ssokolow]

*facepalm* I was checking the wrong fork.

Sorry about that. I didn't get enough sleep and was planning to try to have a nap after testing it for you.

[ssokolow]

Looking at the commit diff, I can already see that it's going in the opposite direction of what I want... but I'll test it anyway since "broken in the way Syntect currently is" is less broken than "broken in the way layout-rs is", even if the changed code is a temporary scaffold to be patched out when a proper solution is ready.

[mert-kurttutan]

This is part of the patch, I will also add option to adapt transparent scheme which should suit your use case.

But, this being mainly due to darkmode handling fill-color incorrectly, makes it less than ideal :)

Like for instance, in vscode dark mode, having default mode to be white background is the better option since the background is black, all the borders and arrows disappear.

Anyway, having options for different schemes should be OK for all cases.

[ssokolow]

Nope. Just makes it more broken when exposed to Chrome's automatic dark mode.

[ssokolow]

If you want to do your own testing, open up the developer tools, go to the Elements tab and, in the CSS sidebar, click the paintbrush icon and pick "Automatic dark mode".

[mert-kurttutan]

Nope. Just makes it more broken when exposed to Chrome's automatic dark mode.

I meant process of dealing with the issue instead of the end result when I said less than ideal. Introducing a new feature for bug of another software.

[ssokolow]

I meant process of dealing with the issue instead of the end result when I said less than ideal. Introducing a new feature for bug of another software.

I was just referring to the <rect width="100%" height="100%" fill="white" /> that you proposed and your patch injects.

EDIT: It's basically adding more of the one part that Chrome's automatic dark mode doesn't handle properly.

[ssokolow]

In the mean time, I've added this to my draft documentation:

Caution

As of this writing, Chrome's automatic dark mode feature inverts stroke
colours but not fill colours, resulting in black-on-white text becoming
white-on-white.

Pending a fix for layout-rs's hard-coded default of a white fill color, you
are advised to include node [fillcolor="#00000000"] in all diagrams to
override this default to transparent fill.

EDIT: Which does, indeed, work around the issue: