Fix: Improve image visibility in dark mode by inverting images

[reshma045]

Description:
This PR resolves the issue where images with transparent or dark elements were barely visible in dark mode. The fix applies a global CSS rule that inverts all elements when the site is in dark mode.

Related Issue:
Closes #887

Screenshots:

Before:

After:

Dark mode:

Light mode:

[perminder-17]

Hi @ugec67 since you were also interested in resolving this one, feel free to add your review/suggestions in order to contribute if you're interested.

[ugec67]

Thanks @perminder-17 I'd love to take a look and share my suggestions shortly.

[ugec67]

Great work @reshma045! 🌟 The fix has clearly improved the visibility of images in dark mode especially for diagrams with transparent or dark elements. I checked the screenshots, and the contrast is much better now. Also glad to see that light mode remains unaffected, which is perfect!

Just a small thought for future enhancements if we encounter cases where images are already optimized for dark mode, we could consider a more selective approach (like targeting specific classes or containers) to avoid unnecessary inversion. But for now, this solution works well and resolves the issue in #887 effectively.

It’s really nice to be part of this with you your fix was clean and thoughtful. Looking forward to contribute on more such improvements! Also a big thanks to @perminder-17 again.

[ksen0]

Thanks for this work @reshma045 and review @ugec67 ! I'm including a video of the dark mode with inversion below, and before we can merge this, I think it would be helpful to think about how to handle unnecessary inversion. For example, in cases of photographs of people; and of thumbnails of artworks; in addition to the case where the image is already optimized.

Since @xinemata 's bug report concerned a specific image, what do you think about adding a specific class for images that do need to be inverted, and applying your filter to those images only. That would mean updating this PR to use that logic, and adding that class to the image originally reported - optionally also reviewing other images that would benefit from it?

darkmode_invert.mov

[reshma045]

Thank you for the feedback @ugec67 and @ksen0!
I’m glad the initial fix improved image visibility in dark mode as intended. I completely agree with the concerns about unintended inversion, especially for photos of people, thumbnails of artwork and images already optimized for dark mode.

To make the solution more robust and avoid visual regression, I propose the following update:

• Create a specific CSS class (e.g., .invert-in-dark) that applies filter: invert(100%) only in dark mode
• Update the reported image from the issue to use this class
• Optionally scan and apply the class to a few other images that would benefit from inversion (diagrams, UI screenshots, etc.)

Please let me know if this sounds good. Thanks again!

[ksen0]

I think that sounds good @reshma045 ! Thank you