Transparent background fills white in dark mode

[yoelcortes]

Hello!

First I'd like to thank all the developers for this wonderful theme! With the latest PyPI version (0.10.1), I'm getting some issues I did not get with version 0.9. Mainly, all png images with a transparent background now have white background.

For example, this is how a png with transparent background looks now (with nbsphinx):

This is how it looked before (assuming dark mode):

Here are links to some examples:

• In Jupyter notebooks (nbsphinx):
  • https://biosteam.readthedocs.io/en/latest/tutorial/Getting_started.html#Solve-recycle-loops-and-process-specifications-with-System-objects
  • https://biosteam.readthedocs.io/en/latest/tutorial/Preferences.html#Diagram-display-preferences (checkout second image)
• In sphinx-design "grid cards":
  • https://biosteam.readthedocs.io/en/latest/index.html

Here is the project used to generate the docs:
https://github.com/BioSTEAMDevelopmentGroup/biosteam/tree/master/docs

I made the background of these images all transparent so that they can work in both light and dark backgrounds. If this is the default behaviour (make all transparent backgrounds white), is there a way to switch off this behavior?

Here is a list of related issues I could find (but could not find a solution):
scipy/scipy#16379
#706

Thanks again!

[drammock]

Thanks for reporting! This is a known issue and a fix is in the works, see #914

[yoelcortes]

Awesome, thanks so much for the quick reply!

[12rambau]

the work on #914 solves the problem for imags but here it's a generated output from a cell I think you won't be able to add extra class. @yoelcortes could you try and let me know (I'm unfamiliar with cell execution in sphinx) ?

[yoelcortes]

@12rambau, thanks for following up with me.

Yeah, that's right... I was able to fix the "grid-cards" using the "dark-light" class, but was unable to get the jupyter notebooks working right (including the images I posted earlier). The images are generated by Python so I'm not sure how would I be able to add the "dark-light" class to python cells. Also, I don't think editing the metadata is feasible in the long run.

Would it be possible to toggle off the behavior of converting all transparent backgrounds to white? Or to toggle off the behavior of changing any backgrounds at all? Considering I am generating maybe 50 png files with transparent backgrounds through jupyter notebook, I think it would be nice to let users see the image files without any alterations.

If this is a behavior that would take time to get working, I can try to help too.

Thanks again!

[drammock]

for a quick fix you could try overriding our CSS. Here is the relevant snippet:

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/styles/variables/_color.scss

Lines 106 to 117 in 112b212

	// adjust images in dark mode
	img {
	filter: brightness(0.8) contrast(1.2);
	}
	/* Give images a light background in dark mode in case they have
	* transparency and black text (unless they have class .only-dark or .dark-light, in
	* which case assume they're already optimized for dark mode).
	*/
	.bd-content img:not(.only-dark):not(.dark-light) {
	background: rgb(255, 255, 255);
	border-radius: 0.25rem;
	}

In the long run I'd be in favor of adding a theme config option to opt-in to this functionality though.

[drammock]

so something like this in your custom css file:

html[data-theme="dark"] img {
    filter: none;
}
html[data-theme="dark"] .bd-content img:not(.only-dark):not(.dark-light) {
    background: unset;
}

should get you close I think

[yoelcortes]

@drammock, @12rambau

Thanks so much for the help! I was able to get this to run with the custom CSS file. I am not too familiar with CSS and this is the first time I setup a CSS file.

I know that adding different functionalities for each case can be hard, so it is nice to know it can be customized through a CSS file. I'll go ahead and close this issue.

Thanks!