wiki: contribution cycle diagram has a borked SVG under dark mode

[Jorropo]

See https://go.dev/wiki/Go-Release-Cycle

This is failing identically both in chromium and firefox.

Trying to open the svg in it's own page give funny results:

(again chromium and firefox failing in the same way)

[Jorropo]

Idk where to find something correct or how to fix this svg, so here is an issue instead. I don't know where to report wiki issues so 🤞 this is correct.

[mauri870]

I remember seeing this diagram not so long ago and it was in the right shape. Here is one from the wayback machine https://web.archive.org/web/20231209042740/https://github.com/golang/go/wiki/Go-Release-Cycle

[mauri870]

Probably related with the migration of the wiki to go.dev #61940

[mauri870]

Actual markdown page in x/wiki shows the svg is fine, might have to do with it blending in with the website background colors

https://github.com/golang/wiki/blob/master/Go-Release-Cycle.md

[mauri870]

No x/wiki at https://dev.golang.org/owners, so I'm pinging the website folks. We might want to add x/wiki to the owners file

/cc @golang/tools-team

[gopherbot]

Change https://go.dev/cl/555375 mentions this issue: devapp/owners: add x/wiki repo and owners

[hyangah]

What version/os of the firefox and chromium? I assume you could reproduce it without any extensions, right?
My firefox 121.0.1 on mac seems to work fine in both dark/non-dark modes.

[Jorropo]

My chromium has no extensions installed,
Using arch linux
Firefox and Chromium are updated to the latest non beta release (121.0.1 for ff, 120.0.6099.199 for chromium)
I have dark style enabled in gnome
And the browsers are set to track the system's preference.

[Jorropo]

Disabling « Dark Style » option in Gnome and restarting the browser fixes it.

[dagood]

Also repros for me on Windows 11.

• Microsoft Edge for Business Version 120.0.2210.133 (Official build) (64-bit)
• Firefox 121.0.1 (64-bit)

If I toggle off this rule in my inspector, it looks great with browser dark theme + website dark mode:

However, it seems to me that the intent was probably to make the svg always have a white background and always have black text/outlines. A dark browser theme just makes the svg's text/outlines white unexpectedly.

[Jorropo]

I can repro your fix. It seems to me this rule is spurious. Will send CL. thx

[gopherbot]

Change https://go.dev/cl/556158 mentions this issue: _content: remove white background on article images

[dagood]

Hmm, sorry, I'm actually not sure it's that simple: even if I disable the rule, if I have my browser theme dark and set the website to its light theme, then the text is white-on-white. (Because the page background itself is white, and my browser's dark theme is still somehow forcing the svg text to be white.)

[dagood]

Ah, the svg actually contains this css internally:

text {
	fill: black;
}
line, path {
	stroke: black;
	fill: none;
}
@media (prefers-color-scheme: dark) {
	text {
		fill: white;
	}
	line, path {
		stroke: white;
	}
}

Don't know how to counteract that from the outside (if possible) but I imagine it would be easy to snip from the svg?

This works for me: https://github.com/golang/go/assets/12819531/2cec3672-7941-49f2-b315-5dea0670469e

[mauri870]

If this turns out difficult to handle, can't we add a color to the svg background instead of keeping it transparent? This way independently of the page background color the text should still be readable. Downside is that we'll see the image borders.

[adonovan]

If this turns out difficult to handle, can't we add a color to the svg background instead of keeping it transparent? This way independently of the page background color the text should still be readable. Downside is that we'll see the image borders.

I agree, this is a simple and robust solution. And if you can be bothered to make the border line a double stripe of black and white then it will be visible in both modes.

There have been attempts to make transparent vector images that look good in both modes (e.g. https://forum.obsidian.md/t/auto-adaptive-images-for-dark-light-theme/13494), essentially by using mid-grey as the primary ink, but to my eyes they end up looking low-contrast in both modes.

I do wonder what the designers who originated "dark mode" had in mind as a plan for transparent images. Surely adaptive CSS cannot be the answer.

[Jorropo]

FWIW my browser recognize the black on black and invert the strokes to white.
That sounds like an awfully fragile solution but so is most things on the web isn't it ?

[gopherbot]

Change https://go.dev/cl/558660 mentions this issue: wiki/images: remove release-cycle.svg prefers-color-scheme

[hyangah]

Thanks all. I removed the dark theme setting from the svg image (and also checked in the svg file to the wiki repo).

Can you please check if this makes any improvement?

From my testing with system dark mode

Before:

After:

[mauri870]

I just checked it again in Firefox and Chrome and it is much better now! The text is readable in both dark and light modes. Thank you @hyangah for addressing this issue!

Additionally, there is a new Contributing page providing detailed instructions on reporting wiki-related issues.

I am closing this issue as completed. Thanks to all those involved!