$$

Say you have a color $(r,g,b)\in [0,1{]}^3$, can you invert its brightness $r+g+b$ while maintaining the hue?

• intuitively, would like to reflect across the plane $r+g+b=3/2$, but that maps some colors outside of $[0,1]$ (e.g. pure red $(1,0,0)$ wants to go to $(\frac{4}{3},\frac{1}{3},\frac{1}{3})$)
• Obsidian’s Minimal theme does it by
  • first inverting colors completely $(r,g,b)\mapsto (1-r,1-g,1-b)$ (which changes the hue diametrically)
  • then rotating the hue ${180}^{\circ }$
• but rotating the hue doesn’t preserve overall brightness $r+g+b$ (much less the perceived brightness), since hue is actually $max(r,g,b)$ (see File:Hsl-and-hsv.svg - Wikimedia Commons)

Solution on Chrome

To replace in Invert! Chrome extension’s on.js file (to find it, use “Option 3: View source of locally installed extension” here)

if (document.getElementById("invertRunning") == null) {
	var style = document.createElement("style");
	style.type = "text/css";
	style.id = "invertRunning";
	document.head.appendChild(style);
}
document.getElementById("invertRunning").innerHTML = "html {-webkit-filter: brightness(85%) invert(100%) hue-rotate(180deg); background: white}";

• The brightness(85%) part is optional; it makes sure the background is not pitch black post-inversion.
• The background: white part sets the default background color of the non-inverted version to be white, just in case that wasn’t set anywhere (otherwise the background will remain white after inversion).

And by the way off.js can be simplified to just

document.getElementById("invertRunning").innerHTML = "";

After these changes, when you click the invert button, Wikipedia looks like this: