Docs: Non-readable diagrams when the dark theme is on

[myshov]

URL(s)

https://eslint.org/docs/latest/developer-guide/code-path-analysis

What did you do?

Turn on the dark theme

What did you expect to happen?

Diagrams are readable

What actually happened?

The black arrows of diagrams almost invisible on the dark background of the site

Participation

• I am willing to submit a pull request for this issue.

Additional comments

As a workaround we can use filter: invert(100%); for the images when the dark theme is on

[mdjermanovic]

Transferred to eslint/eslint, as the code path analysis document is in this repo.

[myshov]

@mdjermanovic hi! I believe that we have to change styles of the site itself too

[mdjermanovic]

Styles for the docs pages are also in this repo. While at this, I'm not sure if we should change styles to invert colors or make sure that those images have a light background so that they look the same in both light and dark modes. @eslint/website-team thoughts?

[harish-sethuraman]

My suggestions are

• we can change the colors of the image's nodes that are not visible by editing the image
• apply styles to those SVG elements and directly import it instead of using img tag? (so we can fill colors to specific node depending on the theme)
• add common background color that works well with dark and light theme?

PS: we cant change the styles of the site itself?

[amareshsm]

invert() won't work I guess.

light theme	dark theme with invert property

As @harish-sethuraman suggested we use SVG or add common background color that works well with both themes.

[kecrily]

I like the idea of SVG themes, we can make a special id for them and then override them uniformly.

[myshov]

invert() won't work I guess.

at least it is more readable and the colors are distinguishable. But anyway I also like the idea with SVG. Btw SVG supports the media query prefers-color-scheme https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/

[harish-sethuraman]

I'd like to hear @eslint/eslint-tsc's thoughts on this too. We might want to make it consistent going forward where these kind of UI differences occurs.

[nzakas]

It's important to note that these SVG images are automatically generated through GraphViz, so any solution we choose should not involve manually editing the SVG.

I think the easiest solution would be to just set the background-color to white on all SVGs that are in the content of a documentation page.

[kecrily]

If it's auto-generated, then maybe we can also consider the mermaid + light/dark theme option. Just a thought

[nzakas]

They are generated by hand right now. :)

[Tanujkanti4441]

What about applying this background color ? It's quite similar with the whole background and arrows are also visible enough.

[nzakas]

There's not enough contrast between the background and the black lines/dots.

I think we can just start by applying a white background to these diagrams?

[Tanujkanti4441]

But instead of applying pure white in background can we apply colors that are more soothing to eyes in dark mode and same time have enough contrast with lines/dots
like this

[nzakas]

If we choose white then there’s no border in light mode at all.

If the website team wants to choose an off white color, they can. I’d just like to get this issue closed. :)