This halves the brightness of all images, unless you hover over them. The media query makes it only active when the global theme is dark. This really helps a lot with blinding white images, and for images that are already dark, or when you want the full contrast, you can easily just hover them to see the original.
With this simplistic CSS there could theoretically be clashes with a website’s native styling. I don’t think I’ve ever actually run into that in practice though.
In the browser, my fix for this is to use a global stylesheet in Stylus (any other userstyle plugin would work) with some really simple CSS:
@media (prefers-color-scheme: dark) { img:not(:hover) { filter: brightness(50%); } }This halves the brightness of all images, unless you hover over them. The media query makes it only active when the global theme is dark. This really helps a lot with blinding white images, and for images that are already dark, or when you want the full contrast, you can easily just hover them to see the original.
With this simplistic CSS there could theoretically be clashes with a website’s native styling. I don’t think I’ve ever actually run into that in practice though.