Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode #36

Open
RunDevelopment opened this issue Mar 29, 2021 · 6 comments
Open

Add dark mode #36

RunDevelopment opened this issue Mar 29, 2021 · 6 comments

Comments

@RunDevelopment
Copy link

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
Copy link
Owner

nikeee commented Mar 29, 2021

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
Copy link
Author

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:

image

And like this without inverted colors:

image

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:

image

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

@RunDevelopment
Copy link
Author

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
Copy link
Owner

nikeee commented Mar 29, 2021

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
Copy link
Author

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
Copy link
Owner

nikeee commented Mar 29, 2021

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

This is the one I intend to use:

image

(or Dark Reader messed something up)

@nikeee nikeee mentioned this issue Nov 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants