Allow content creators to "Suppress Dark Mode Filter" for PNG and SVG images - #4101
Merged
Conversation
…Mode Filter" for SVGs
… suppress value inversion in dark mode for SVG images as well as PNGs."
Contributor
npm SnapshotWant to try this PR's changes before it merges? Comment |
Contributor
|
Size Change: +73 B (+0.01%) Total Size: 519 kB 📦 View Changed
ℹ️ View Unchanged
|
benchristel
marked this pull request as draft
August 20, 2026 14:48
benchristel
force-pushed
the
benc/fix-inversion-toggle
branch
from
August 20, 2026 15:26
96106cd to
e907e43
Compare
benchristel
changed the title
benchristel
marked this pull request as ready for review
August 20, 2026 16:04
Myranae
approved these changes
Aug 20, 2026
Myranae
left a comment
Myranae
left a comment
Contributor
There was a problem hiding this comment.
Looks good! Looks like the text in the "tooltip shows note about image format for non-PNG images" image editor test might need to be updated, but otherwise, all good!
benchristel
commented
Aug 20, 2026
benchristel
changed the title
| * image.css and dark-mode-toggle.tsx. Replace these selectors with a | ||
| * class that gets added to images that should be inverted, so the set of | ||
| * extensions can have a single representation in TypeScript code. | ||
| */ |
Contributor
There was a problem hiding this comment.
My thought with this current setup (all images with either of these extensions) is that any image in Perseus automatically gets this treatment. So, for instance, if content has an inline image, it will get the dark mode treatment. If we set up a function that adds a class to images, I would want to ensure that all avenues of including an image (both now and in the future) are managed by that code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
Context: In dark mode, we use a CSS filter to invert the lightness of each pixel
in an image. This allows diagrams authored with a transparent background and
black foreground to be visible against the dark background of the page.
However, we don't want to invert all images. Photographs and paintings should
not be inverted in dark mode. We never invert JPG images, since those are likely
to be photographs, and we also don't invert GIFs. Content creators can also use
the "Suppress Dark Mode Filter" toggle in the image widget editor to turn off
the inversion for selected images.
Previously, this option was only available for PNGs. But we've encountered some
real-world examples where SVG images should not be inverted. Therefore, we
are expanding the setting to SVGs.
Issue: LEMS-4473
Test plan:
https://ka-perseus-images.s3.amazonaws.com/34a448332ebd1515364999919ae1b646aaebba0f.svg