CSS to invert colors for specific images in dark mode

If you have images with a lot of white and light colors (for example technical illustrations) and you want to invert their color when using Logseq in Dark Mode, add the following CSS to custom.css file:

.dark img.invert {filter: invert(88.1%) hue-rotate(90deg);}

and mark each image that should be inverted like this:

![](image.png){:class "invert"}

If you want to invert all the images, remove the .invert from the CSS, like this:

.dark img {filter: invert(88.1%) hue-rotate(90deg);}

If you want to use another class name instead of “invert” remember to change that .invert in CSS accordingly (notice the dot).


If you are wondering what’s the syntax to assign multiple classes: {:class "foo bar"}. Check this to align image to the right with another class.

P.S. you can adjust those two values in the CSS (88.1% and 90deg) to make the white background of images match the background of your dark theme.