Print screened pictures when pasted are distorted in dark mode

Plugins and Custom CSS
#1

Hello, it would be great if pasted pictures (in dark mode) would remain unchanged from the original (print screned) colors. It is important, when colors in the picture have the information of the note.

#2

The builtin dark mode is just a simple filter which when applied twice is not the identity. You can make it that with which should leave images untouched:

.dark-mode {
  filter: invert(100%) hue-rotate(180deg);
}
#3

Uploaded the code to custom CSS. Unfortunately it does not work with print screened picture. I have already implemented given code for PDFs, which works:
.dark-mode, .dark-mode .PdfHighlighter { filter: invert(100%) hue-rotate(180deg); }

There is by the way the picture which was distorted after pasting it:
image

#4

Thanks for the test image!

It appears that the browser implementation of hue-rotate is somewhat … well … special.

See Why does the CSS filter hue-rotate produce wierd results? or Why doesn’t hue rotation by +180deg and -180deg yield the original color?if you are interested in the details. TLDR is hue-rotate(360deg) (rotate a full circle) is the identity, but hue-rotate(180deg) twice (rotate two times a half circle) is not. The above .dark-mode CSS is closer to the original than the builtin CSS but not quite reverts to the original colors and with the current implementation of the dark mode this can not be improved further.

Best you can do is use a dedicated Custom CSS dark mode like New RemNote Dark Theme by eustachio or Dark theme for RemNote inspired by Solarized Dark theme - Updated which do not use filters or only invert without “fixing” the colors:

.dark-mode {
  filter: invert(100%);
}
1 Like