
Here's a UserScript that fixes the problem. This includes a polyfill for onbeforescriptexecute
if you're not using Firefox. I tested this as working in Chrome through Tampermonkey.
If you don't want the highlighting at all, you can just make both colors equal to #2D2D2D
at the end of the script.
// ==UserScript==
// @name Stack Overflow Review Highlight Dark Mode Fix
// @namespace http://kylejrp.com/
// @version 0.1
// @description Fixes the dark mode highlighting in the review queue
// @author kylejrp
// @grant none
// @run-at document-start
// @include https://stackoverflow.com/review/*
// ==/UserScript==
// Polyfill from https://github.com/jspenguin2017/Snippets/blob/master/onbeforescriptexecute.html
(() => {
"use strict";
const Event = class {
constructor(script, target) {
this.script = script;
this.target = target;
this._cancel = false;
this._replace = null;
this._stop = false;
}
preventDefault() {
this._cancel = true;
}
stopPropagation() {
this._stop = true;
}
replacePayload(payload) {
this._replace = payload;
}
};
let callbacks = [];
window.addBeforeScriptExecuteListener = (f) => {
if (typeof f !== "function") {
throw new Error("Event handler must be a function.");
}
callbacks.push(f);
};
window.removeBeforeScriptExecuteListener = (f) => {
let i = callbacks.length;
while (i--) {
if (callbacks[i] === f) {
callbacks.splice(i, 1);
}
}
};
const dispatch = (script, target) => {
if (script.tagName !== "SCRIPT") {
return;
}
const e = new Event(script, target);
if (typeof window.onbeforescriptexecute === "function") {
try {
window.onbeforescriptexecute(e);
} catch (err) {
console.error(err);
}
}
for (const func of callbacks) {
if (e._stop) {
break;
}
try {
func(e);
} catch (err) {
console.error(err);
}
}
if (e._cancel) {
script.textContent = "";
script.remove();
} else if (typeof e._replace === "string") {
script.textContent = e._replace;
}
};
const observer = new MutationObserver((mutations) => {
for (const m of mutations) {
for (const n of m.addedNodes) {
dispatch(n, m.target);
}
}
});
observer.observe(document, {
childList: true,
subtree: true,
});
})();
(() => {
"use strict";
window.onbeforescriptexecute = (e) => {
if (e.script.textContent.includes("defaultAnswerColor")) {
const fixed = e.script.textContent
.replace("#F4A83D", "#cc7525") // Start color
.replace("#FFF", "#2D2D2D"); // End color
e.replacePayload(fixed);
}
}
})();
<div class="mainbar reviewable-answer">
through astyle
attribute that updates the background color. This animation looks like it's done throughreview.js
. Fixing it would require changing thenewAnswerStartingColor
anddefaultAnswerColor
to dark mode colors (or removing the animation altogether). ChangingdefaultAnswerColor = '#2D2D2D'
instead of#FFF
does a pretty good job of fixing this. – Kyle Pollard Dec 16 '20 at 17:57