Quiero invertir colores en toda la página web, excepto en un botón. Estoy usando el siguiente código para invertir colores en toda la página:
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)); } Tenga en cuenta que --invertColors es una variable CSS global y se establece en 1 o 0 .
El problema comienza con eso: tengo un objeto html que no quiero que se aplique el filtro:
<button onclick="backgroundColors_Yellow()" class="background-yellow-button" >A</button>Y la sección CSS correspondiente:
.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; }Intenté reemplazar la sección html de CSS con este código a continuación, pero no funciona (todavía todo está cambiando, incluido ese botón):
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)); } Intenté agregar una etiqueta de identificación a ese botón id="button-y" y seleccionar la sección html con html:not(#button-y) pero no funciona de ninguna manera.
Gracias por cualquier consejo, Mateusz.
Puede invertir todo el documento HTML y luego simplemente volver a invertir el botón:
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>