What is the URL of the page with the issue?
https://pkg.go.dev/github.com/jmcmenamy/GoVector@v0.8.0
What is your user agent?
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Screenshot
What did you do?
Made sure the theme toggle at the bottom of the page is set to system preference, then activated dark mode on the device.
What did you see happen?
The logo at the top of the page does not show the dark mode version of the image. It shows the light mode version of the image.
What did you expect to see?
I expected to see the dark mode version of the image in my pkg.go.dev README.
I am trying to get my README on github and the README on pkg.go.dev to both correctly respond to dark/light mode user preferences when rendered. This github article describes Github's supported method: Using a <picture> element in the README. This is what I do in my README:
<picture>
<source media="(prefers-color-scheme: dark)" srcset=".images/GoVectorDark.svg">
<source media="(prefers-color-scheme: light)" srcset=".images/GoVectorLight.svg">
<img alt="GoVector Logo" src=".images/GoVectorLight.svg">
</picture>
This renders correctly on Github, and the <picture> element is left intact with two <source> elements and a fallback <img> element. But on pkg.go.dev, it seems the README is sanitized to only keep the <img> tag, so it's only every showing the light mode photo.
I also experimented with using <style> tags inside the SVG itself with @media (prefers-color-scheme: ...) as well as the light-dark() function. However, since SVGs are rendered as external images (not part of the DOM), browser support for these approaches is inconsistent. These methods didn’t reliably switch colors based on theme.
Request: Support the <picture> element (and its <source> children) in rendered READMEs on pkg.go.dev so that authors can provide images optimized for dark and light themes in a reliable way, as GitHub does.
Thanks for your time!