Image Color Inversion in Live preview Mode

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:

image

And here’s how it looks outside of it:

image

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!

There’s some detailed discussion here on Discord, but it has to do with Live Preview being all cm-lines and layers.

I used to set a background-color to match background-primary for images in live preview that I wanted this for, and that took care of it, but here’s a better way:

before (with your CSS above):

live preview | reading view

Using this section of your original, add in the second two sections:

.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;
}

.theme-dark img {
    filter: invert(1) hue-rotate(180deg);
}

.cm-editor .cm-scroller {
    z-index: auto;
}

.theme-dark .image-embed[src~="screen"] {
    mix-blend-mode: screen;
}

and write your embedded links like ![[123.gif# screen]] (adding in the # screen after .jpg, .gif, etc.).

Screenshot 2025-02-03 083903

after:

Also, the image in a rendered table had the correct effect for you, but not for me (not sure why), so I needed to add this for the images in a table, tho you many not need it.

.markdown-source-view.mod-cm6 .cm-content > .cm-table-widget {
    contain: unset !important;
}

Hope that helps or points you in the right direction.

1 Like

Worked! Thank you!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.