2

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.

Improve this question
1
  • Maybe you really want to use mix-blend-mode:difference;? Note that your text color should be #fff; (white) because black minus black is zero and so is white minus white, so white will go to black, but black will not go to white.
    – StackSlave
    Commented Sep 30, 2021 at 1:36

1 Answer 1

Reset to default
3

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>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.