Background is already set on the outer <figure>-element:
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'] {
border:var(--border-subtle,1px solid #c8ccd1);
border-bottom:0;
background-color:var(--background-color-interactive-subtle,#f8f9fa);
}I don't see any reason why the same background is set again on the <img>:
figure[typeof~="mw:File/Thumb"] > :not(figcaption) .mw-file-element,
figure[typeof~="mw:File/Frame"] > :not(figcaption) .mw-file-element {
[...]
background: var(--background-color-interactive-subtle,#f8f9fa);
}Removing that line would solve this issue, as .skin-invert-image won't invert anything that is defined outside the <img>.