Adapt Images to Dark Theme

Feature requests
1

Use case or problem

The problem is that some images, often diagrams from books, consist of dark graphic elements on a white background, and when using a dark theme, this white background simply becomes blinding.

Other images may not be almost entirely white, but they will still be bright and uncomfortable for the eyes.

This is especially exacerbated by poor eyesight and the vulnerability of the eyes to disease in general.

Proposed solution

As a solution, I would like to see the option to adapt the image to a dark theme.

There are two types of adaptation:

  • Color inversion
  • Brightness reduction

Ideally, I would like to see two buttons in the upper right corner of each attached image in the form of Contrast and Brightness icons. When clicked, the image will be adapted accordingly to the dark theme.

Current workaround

At the moment, this can be done using a CSS snippet:

img[alt$="invert"]{
  filter: invert(1) hue-rotate(180deg) brightness(0.775) contrast(1.4);
}

img[alt$="brightness75"]{
  filter: brightness(0.75);
}

img[alt$="brightness50"]{
  filter: brightness(0.50);
}

/* ----- */

img[src*="_invert"]{
  filter: invert(1) hue-rotate(180deg) brightness(0.775) contrast(1.4);
}

img[src*="_brightness75"]{
  filter: brightness(0.75);
}

img[src*="_brightness50"]{
  filter: brightness(0.50);
}

But this is inconvenient, as you have to either add a suffix to the file name each time you insert it, or simply change the name of the file itself.

Related feature requests

−