Clash Royale CLAN TAG#URR8PPP

CSS Double Invert Filter with Transition

I'm using the filter: invert(100%) rule to create a dark theme for a website. (discussed here)

filter: invert(100%)

To avoid non-svg images and videos from being inverted, those elements are doubly inverted. This is a decent hack, but I'm running into trouble combining it with CSS transitions.

My intended effect: transition the wrapper into an inverted state, without affecting the no-invert elements. This means they are simply unaffected or the double inversion takes no time.

wrapper

no-invert

I've played with it for far too long and have no working solution. The :not() selector may be useful, or maybe some combination of transition-delay and transition-duration.

:not()

transition-delay

transition-duration

The snippet below is undesirable because the image is still affected by the parent div transition.

Any help would be appreciated, thank you!

const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('#toggle');
button.onclick = () =>
wrapper.classList.toggle('dark');
;

.wrapper
background: #fff;
color: #000;
transition: filter 2s;


.dark
filter: invert(100%);
transition: filter 2s;


.wrapper .no-invert
transition: filter 2s;


.dark .no-invert
filter: invert(100%);
transition: filter 2s;


<button id="toggle">Toggle</button>

<div class="wrapper">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<img src="http://via.placeholder.com/350x150.png" class="no-invert" />

</div>

invert(50%)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.