I always want to have images that will adapt to the dark or white theme. But with JPEG files it is more the dream. Nevertheless I found one interesting hack that you can make something like that.
INPUT
The source images are JPG files white white background.
OUTPUT (Light | Dark theme)
HOW TO REPLICATE
“Adaptive inversion”
![[image.jpg#invert_B]] - use when image (mostly white) > fits for dark theme
![[image.jpg#invert_W]] - use when image (mostly black) > fits for light theme
“Adaptive inversion” + Contrast
![[image.jpg#invert_B_C]] - image (mostly white) > fits for dark theme + add contrast
![[image.jpg#invert_W_C]] - image (mostly black) > fits for light theme + add contrast
2. Add this CSS snippet
/* 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 .popover.hover-popover .markdown-preview-view img {
mix-blend-mode: screen;
/*filter: opacity(1);*/
}
.theme-light .popover.hover-popover .markdown-preview-view img {
mix-blend-mode: multiply;
/*filter: opacity(0.95);*/
}
/* Image dynamic colors inversion */
.theme-dark span[src$="invert_B"] img{
filter: invert(1) hue-rotate(180deg);
}
.theme-light span[src$="#invert_W"] img{
filter: invert(1) hue-rotate(180deg);
}
.theme-dark span[src$="invert_B_C"] img{
filter: invert(1) hue-rotate(180deg) contrast(1.5);
}
.theme-light span[src$="#invert_W_C"] img{
filter: invert(1) hue-rotate(180deg) contrast(1.45);
}
- The “Image dynamic colors inversion” part in CSS is doing the magic
- You need to decide which images should be inverted -as for photos the result looks funny!
- As extra I included the blending of the image into background but this im using as default for all images in my theme: Suddha theme v.1.2 [update for Obsidian v0.10.11+]
