Option to selectively chose if an image's colour is inverted when viewed using Dark Mode

[JNR8]

Describe the feature you'd like

I am creating a site which will include various black and white diagrams with transparent backgrounds. Currently when viewing the site with Dark Mode enabled these images will show as black lines on a very dark background, making them very difficult to read. I would like an option to choose to invert the image colour if the image is displayed when viewing the site with Dark Mode enabled. Being able to choosing this on a per image basis when adding the image to the page would avoid affecting other images on that page or the rest of the site that should not have their colours inverted.

Describe the benefits this would bring to existing BookStack users

This would enable consistency across light and dark themes for black and white transparent images. I currently use a verions of the diagrams with a white background, but when viewed in Dark mode this is quite a striking inconsistency compared to viewing in light mode.

Can the goal of this request already be achieved via other means?

I am uncertain. I am have done some googling, but I am not particularly skilled with this type of thing, so may have missed an obvious answer. Having the option wthin Books Stacks WYSIWYG menu would be a more elegant solution.

Have you searched for an existing open/closed issue?

• [X] I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

1 to 5 years

Additional context

No response

[JNR8]

Just to be clear, the diagrams are made outside of Bookstack, and are not related to the Diagram creation feature in Bookstack.

[ssddanbrown]

Hi @jennec,

This isn't the kind of setting I'd look to add to BookStack, just because it's quite use-case specific & non-standard while I try to avoid adding new settings/options where possible.

There are some ways this could be achieved via light customizations if interested. If there is something unique for these in the "Alt" text (editable in the BookStack editor) or filename of the image, then CSS could be used to invert just those images.

For example, the following "Custom HTML Head Content" customization setting code:

<style>
.dark-mode .page-content img[alt^="Diagram:"] {
  filter: invert(1);
}
</style>

would invert images in dark mode if they have an "alt" text value (Labelled "Alternative description" in editor image form) value that starts with Diagram:.