Add dark mode

[RunDevelopment]

Thank you for the great tool!

Would it be possible to add a dark mode and that the theme (light/dark) is automatically chosen depending on the user's configured preference?

[nikeee]

That would be possible and I also thought about that.

The thing is that we need to style the rendered graph accordingly. This becomes a problem if the user styles his graph with DOT attributes.

Possible solutions:

• Provide a manual switch between dark and light mode (with the initial value being the user perference)
• Keep the graph display container with a white background (which would be weird for a dark mode).

[RunDevelopment]

You're right, a manual switch should be provided in addition to automatic detection.

Keep the graph display container with a white background (which would be weird for a dark mode).

That's a general problem with Dark mode. It seems like most gvs assume a white background.

How about we do this: In dark mode, there are two ways to display the graph container.

1. Rendered as is. This is what the website is currently doing.
2. With inverted colors. This means that the new bg color will be pure black and the new text color will be white. To correct colors (e.g. red will be inverted to magenta), we rotate the hue by 180deg.

The final result will look like this with inverted colors:

And like this without inverted colors:

It looks ok but there are a few problems with this approach:

1. We ignore user-defined colors.
2. The hue correct works but that's it. The inverted color will still look different because of saturation and brightness.
3. Font anti-aliasing doesn't look good with this filter because of subpixel font rendering.

---

There are also browser plugins that can achieve better results. E.g. this is what the Chrome Dark Reader plugin produced:

Colors look good and fonts AA looks good as well. But they seem to use a rather complex approach.

[RunDevelopment]

That being said, it will probably be enough to only change the editor theme rn. Black on one side and white on the other side doesn't look bad IMO.

[nikeee]

It wouldn't be black either. The editor has a dark mode built-in, which I'd use for that.

Maybe applying a CSS filter (as you proposed) would suffice (instead of styling the SVG elements directly).

[RunDevelopment]

It wouldn't be black either. The editor has a dark mode built-in, which I'd use for that.

I also used that one for the screenshots. Seems pretty black to me.

[nikeee]

You probably used the high contrast theme, which I did not intent to use.

This is the one I intend to use:

(or Dark Reader messed something up)