I want to invert colors on the whole web page, except one button. I'm using below code to invert colors on whole page:
html {
scroll-behavior: smooth;
background-color: var(--bgColor);
filter: invert(var(--invertColors));
-moz-filter: invert(var(--invertColors));
-o-filter: invert(var(--invertColors));
-ms-filter: invert(var(--invertColors));
}
Note that --invertColors is global CSS variable and is set to either 1 or 0.
The problem starts with that: I have one html object that I don't want the filter to be applied:
<button onclick="backgroundColors_Yellow()" class="background-yellow-button" >A</button>
And the corresponding CSS section:
.background-yellow-button {
font-size: 25px;
color: #fff70b;
cursor: pointer;
font-family: Raleway, sans-serif;
background-color: #111;
padding: 2px 8px 2px 8px;
border-radius: 50%;
border: 2px solid;
border-color: #fff70b;
outline: none;
font-weight: 600;
}
I have tried replacing CSS html section with this code below, but it does not work (still everything is changing including that button):
html:not(.background-yellow-button) {
scroll-behavior: smooth;
background-color: var(--bgColor);
filter: invert(var(--invertColors));
-moz-filter: invert(var(--invertColors));
-o-filter: invert(var(--invertColors));
-ms-filter: invert(var(--invertColors));
}
I have tried adding an id tag to that button id="button-y", and selecting html section with html:not(#button-y) but it doesn't work either way.
Thanks for any tips, Mateusz.
You can invert the entire HTML document, and then simply re-invert the button itself:
function invert() {
const htmlElement = document.querySelector('html');
htmlElement.classList.toggle('invert');
}.invert {
filter: invert(1);
}
.invert .do-not-invert {
filter: invert(1);
}
.swap-color-button {
background-color: yellow;
font-size: 1.5em;
}<body>
<div class="wrapper">
<p style="color:red; font-size: 2em;">red</p>
<p style="color:orange; font-size: 2em;">orange</p>
<button class="swap-color-button do-not-invert" onclick="invert()">Invert Colors</button>
<p style="color:green; font-size: 2em;">green</p>
<p style="color:blue; font-size: 2em;">blue</p>
<p style="color:purple; font-size: 2em;">purple</p>
</div>
</body>