Feature: dark-mode svg :)

[tfiers]

should work, e.g: https://www.ctrl.blog/entry/svg-embed-dark-mode.html (css media query, plus, mayb, ..)

We'd post-process dot's output

[tfiers]

maybe just setting bg to transparent instead of white would already be enough, actually

[tfiers]

yeah, 'wontfix', in favor of

• set bg to transparent (so no shining bright in dark mode) #23

[tfiers]

Actually, reopening.
Via e0ba81a:
DarkReader does a nice thing with vanilla (daylight) svg: lines becomes white
But only on dreampuf! not on gh neither on pages.

So, yes, a post-process of svg to make the edges (arrows) (and node borders then too) white.
(a dark mode rule)

From above link

The following example simply creates a white canvas in default/light mode, or a black canvas in dark mode.

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      svg {
        background-color: white;
        color-scheme:light dark;
      }
      @media (prefers-color-scheme:dark) {
        svg {
          background-color: black;
        }
      }
    </style>
  </defs>
</svg>

We'd do that, but for..
..Give every ellipse..

Excerpts from https://github.com/tfiers/PkgGraph.jl/blob/5edfa49/docs/img/Unitful-deps.svg?short_path=f1a5c6f :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 5.0.1 (20220820.1526)
 -->
<!-- Pages: 1 -->
<svg width="791pt" height="476pt"
 viewBox="0.00 0.00 790.69 476.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 472)">
<!-- Unitful -->
<g id="node1" class="node">
<title>Unitful</title>
<ellipse fill="white" stroke="black" cx="500.55" cy="-450" rx="37.09" ry="18"/>
<text text-anchor="middle" x="500.55" y="-446.3" font-family="sans-serif" font-size="14.00">Unitful</text>
</g>
<!-- Unitful&#45;&gt;ConstructionBase -->
<g id="edge1" class="edge">
<title>Unitful&#45;&gt;ConstructionBase</title>
<path fill="none" stroke="black" d="M475.52,-436.49C454.53,-425.99 424.19,-410.82 399.95,-398.7"/>
<polygon fill="black" stroke="black" points="401.23,-395.9 391.98,-394.72 398.48,-401.41 401.23,-395.9"/>
</g>

[tfiers]

So:

g.node ellipse → stroke: white
g.edge path & polygon → stroke: white

Or we could go full dark mode, do what DarkReader does with the vanilla.
And add:

g.node text → color: white
g.node ellipse → fill: black

To make this work, mayb: remove this individual styling from every node; and replace by stylesheet on top (also for light mode).
alternatively (maybe more robustly?) do the dark mode with !importants

[tfiers]

(readme would then be: "This will open the browser to [this url], which renders something like the following image")

[tfiers]

Test:

upload of

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <style>
        ellipse {
            fill: black;
        }
        @media (prefers-color-scheme: dark) {
            ellipse { fill: white; }
        }
    </style>
    <ellipse cx="20.84" cy="20" rx="20.69" ry="18"/>
</svg>

(adapted from https://stackoverflow.com/a/67190894/2611913)

[tfiers]

ok that test works: on github it switches. but not locally. so ok, is all good.

[tfiers]

yossss. it works online