Some documentation assets don't look great in darkmode

[bcardarella]

Example: https://hexdocs.pm/floki/readme.html see the logo in darkmode. Screenshot:

I don't know what the best path here is. Either a nudge to authors that they should check their logos in darkmode or if ex_doc supported darkmode/daymode specific logos.

[josevalim]

To be fair, the same issue happens on GitHub when running GitHub on dark mode. How does GitHub solve this?

[cw789]

I think this should be tackled by logo / banner designers.
It's doable within the .svg itself.

[yordis]

Should this issue be brought up to CommonMark folks? This sounds like a markdown issue unless we want to solve it for ex_doc specific.

A trick we could do is to inject ?theme= query to all the links pointing to an image, and hopefully the server knows what to do with it, but it is less than ideal IMO.

P.S: Same issues related to being optimized for devise and viewport sizes

[yordis]

Otherwise, I would suggest to suggest people add some background to the logos, but obviously this is a workaround

[josevalim]

Yeah, I will close this because this is not an ExDoc issue per-se. Feel free filing up issues upstream though.

It is also worth noting that in ExDoc the preferred style is to add the logo to the sidebar, which is always a single color, and therefore it doesn't have those issues.

Finally, Hex will eventually add README rendering to packages, so there is even less reasons to add the README to the docs. :)

[yordis]

Finally, Hex will eventually add README rendering to packages, so there is even less reasons to add the README to the docs. :)

@josevalim if you don't mind, what does that mean?

I have been trying to move away from adding anything to README.md other than contribution and non-elixir stuff and move it to somewhere else, so I am curious to understand where this is going because still less than ideal at the moment for me.

[ericmj]

if you don't mind, what does that mean?

We will display the readme on the hex.pm package page in the future. This page: https://hex.pm/packages/ex_doc.

[yordis]

oooh LETS GOOOOOO!

[yordis]

https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to

Hah, related to

A trick we could do is to inject ?theme= query to all the links pointing to an image, and hopefully the server knows what to do with it, but it is less than ideal IMO.

Maybe we should follow them on this one?

[josevalim]

@yordis if somebody wants to send a PR, it will be welcome. My understanding is that it all happens on the JS side of things. When you go into light mode, show all images that end with #gh-light-mode-only and hide all ending with #gh-dark-mode-only, and then the opposite for dark mode.

[yordis]

@josevalim I think you can do it with CSS thou, you hide or show the image based on the theme, something around the lines of

.dark-theme img[src*="#gh-light-mode-only"] {
  display: block;
}

Let me try and see how that goes.

[josevalim]

Ah, smart!

[yordis]

Hey folks, any idea how to deal with epub having the image twice?

#1445 (comment)

[bcardarella]

@yordis hiding the img element as is suggested in the PR could work but it might be better to have a background image that swaps out depending upon the dark/light mode rather than the img tag. This would avoid the double render