This one does not flip JPGs and has a better background adjustment.
Bug 1715361 Comment 19 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
This one does not flip JPGs and has a better background adjustment. This is what happens: ``` const darkBackground = [42,42,46] //#2a2a2e function isDarkTheme() { return window.matchMedia("(prefers-color-scheme: dark)").matches; } function invert() { let css = `html { background-color: rgba(${darkBackground.join(",")}); } html, img[src*=".jpg" i], img[src*=".jpeg" i] { filter: invert(100%); }`; let head = document.getElementsByTagName('head')[0]; let style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(css)) head.appendChild(style) } if (isDarkTheme()) { invert(); let elements = document.querySelectorAll(`html, body, body > *`); for (let element of elements) { let color = window.getComputedStyle(element).getPropertyValue('background-color'); let [r,g,b,a] = color.match(/[.?\d]+/g); // If a custom background color is set and it is close to white, replace it // with the dark background (inverted, so it gets properly inverted by CSS filter). if (r > 245 && g > 245 && b > 245) { element.style.backgroundColor = `rgba(${darkBackground.map(e => 255-e).join(",")})`; } } } ```