search

blampe / goat

Render ASCII art as SVG diagrams
MIT License
666 stars 44 forks source link

Examples in GH dark mode #23

Closed martinthomson closed 5 months ago

martinthomson commented 1 year ago

These examples are black lines on a black background, which doesn't work so well.

dmullis commented 1 year ago

This bug is agent-specific: Line color as shown for README.md is correct on Firefox, but wrong on Safari, as described in this bug. MDN tells us that the behavior "Respects color-scheme inherited from parent" of property prefers-color-scheme is non-standard, specific to Firefox only.

Line color on all the SVG examples accessible from sub-directory examples appears correct as served by Github, on both Firefox and Safari, with the browser preference set to either of dark or light modes.

Examining with Firefox DevTools-Inspector README.md as served by Github in dark mode shows CSS property color-scheme being set in the GH-specific file color-modes.scss. Toggling the property off interactively via Inspector causes SVG line color to go black as described in the bug report.

Two strategies for correction are possible:

  1. Further analyze the HTML environment specific to Github's presentation of the top-level README.md and craft a fix to be applied in goat's generated README.md or SVG files.
  2. Remove all SVG rendering from the top-level README.md and refer the visitor to examples instead.
martinthomson commented 1 year ago

@dmullis, thanks for the analysis. I had previously concluded that it was not possible to fix how SVG was rendered when included with <img> tags from markdown. But the fix here does seem to work at least as far as some browsers go (Chromium also respects the necessary SVG media query).

Another approach to consider - which might be the same as option 1 - is to render a backdrop on each of the sample images; the cost of that being that you'd probably want new code for that. That could be white or near-white by default and use the same media query to invert for dark mode.

dmullis commented 1 year ago

render a backdrop on each of the sample images

I spent a few hours experimenting with adding such a feature to the CLI of goat, but propagating the additional color information through the source code, and then the HTML/CSS at runtime became intolerably unwieldy.

dmullis commented 5 months ago

Fixed in https://github.com/blampe/goat/commit/388020889a7b15bd60f69e3c32fb100beba1210f