JSFiddle - React, Tailwind, and code Playground

by Yerko Palma

HTML

<div class="target">
    <p>some text</p>
</div>
<button class="trigger">change</button>

CSS

.inverse-color {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in=\'SourceGraphic\' type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert"); 
}
.target {
    background-color: #eee;
}

JavaScript

$(".trigger").click(function(){
    $("html").toggleClass("inverse-color");
});