Auto-adaptive images [for dark / light theme]

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+]
4 Likes

This is fantastic!
Great work :+1: