How to invert color of entire page when hovering on a link

Question

I would like to invert the colors of the entire page (text, images, background) when hovering on a specific link in my menu. Think about it like a Dark Mode preview just by hovering on a button.

I'm aware of the css filter: invert(100%); but not sure how to make the entire page invert based on one hover using CSS. Thanks for any help!

`` add this style-sheet in your body tag via JS, while hovering the link — Nishant Solanki, Nov 02 '19 at 06:52
You might be interested in this answer: https://stackoverflow.com/questions/29037763/css-equivalent-of-has, AFIAK it's not possible using a CSS only solution, but may be soon. — dwjohnston, Nov 02 '19 at 06:57

score 2 · Accepted Answer · answered Nov 02 '19 at 08:29

You have to use Javascript to achieve what you want. The idea is to apply a class with filter: invert(1); to the body element when the mouse is over (onmouseoover event) the link and remove it when the mouse leaves (onmouseleave event):

const invertLink = document.querySelector('#invert');
const toggleDark = () => document.querySelector('body').classList.toggle('dark');
invertLink.addEventListener('mouseover', toggleDark);
invertLink.addEventListener('mouseleave', toggleDark);

.dark {
  filter: invert(1);
  background: black;
}

<body>
  <h1>Hello World</h1>
  <a href="#" id="invert">Hover me!</a><br><br>
  <img src="https://www.gravatar.com/avatar/">
</body>

How to invert color of entire page when hovering on a link

1 Answers1