Skip to content

x/pkgsite: support <picture> element in README for light/dark mode images #74276

Open
@jmcmenamy

Description

@jmcmenamy

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

Image

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 ever 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. Regardless, showing light/dark images should be supported for non-svg files, which necessitates a method like the <picture> element.

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    DocumentationIssues describing a change to documentation.NeedsInvestigationSomeone must examine and confirm this is a valid issue and not a duplicate of an existing one.pkgsite

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions