I am using a snippet that inverts the colors on embedded images when I toggle between light and dark mode, and sets the light to multiply to “get rid” of the background too. This last part only seemed to work in reading mode, but I put an image in a table and it worked inside the table… so now I think I’m jsut missing something to make it work in every case.
When I’m using the light theme it’s fine but it makes a world of difference with the dark mode.
Here’s how it looks inside the table:
And here’s how it looks outside of it:
Here’s the css:
/* General and default image blending */
.theme-dark img {
display: block;
max-width: 80%;
padding: 0 auto 0 auto;
outline: none;
margin-left: auto;
margin-right: auto;
mix-blend-mode: screen;
filter: opacity(1);
}
.theme-light img {
display: block;
max-width: 80%;
padding: 0 auto 0 auto;
outline: none;
margin-left: auto;
margin-right: auto;
mix-blend-mode: multiply;
filter: opacity(0.95);
}
/*Emblemed images blending tweaks */
.theme-dark .cm-preview-inline .markdown-preview-view img {
mix-blend-mode: screen;
/*filter: opacity(1);*/
}
.theme-light .cm-preview-inline .markdown-preview-view img {
mix-blend-mode: multiply;
/*filter: opacity(0.95);*/
}
/* Image dynamic colors inversion */
.theme-dark img{
filter: invert(1) hue-rotate(180deg);
}
Any ideas? Thanks!