[User script] StackExchange: Show revision diff color toggle

stackexchange-diff-color-toggle.user.js

// ==UserScript==
// @id stackexchange-diff-color-toggle@poke
// @name StackExchange: Show revision diff color toggle
// @namespace poke
// @version 1.2.0
// @author Patrick Westerhoff
// @include *://*.stackexchange.com/*/revisions*
// @include *://*.stackexchange.com/review/suggested-edits/*
// @include *://meta.serverfault.com/*/revisions*
// @include *://meta.serverfault.com/review/suggested-edits/*
// @include *://meta.stackoverflow.com/*/revisions*
// @include *://meta.stackoverflow.com/review/suggested-edits/*
// @include *://meta.superuser.com/*/revisions*
// @include *://meta.superuser.com/review/suggested-edits/*
// @include *://serverfault.com/*/revisions*
// @include *://serverfault.com/review/suggested-edits/*
// @include *://stackoverflow.com/*/revisions*
// @include *://stackoverflow.com/review/suggested-edits/*
// @include *://superuser.com/*/revisions*
// @include *://superuser.com/review/suggested-edits/*
// @homepageURL https://gist.github.com/poke/a065aa208e225894c3daf8408e69d448
// @updateURL https://gist.github.com/poke/a065aa208e225894c3daf8408e69d448/raw/stackexchange-diff-color-toggle.user.js
// @run-at document-end
// ==/UserScript==

const revisions = document.getElementById('revisions');
const reviewContent = document.querySelector('.review-content');
if (revisions) {
	enableToggle(revisions);
}
else if (reviewContent) {
	const reviewObserver = new MutationObserver(mutations => {
		enableToggle(reviewContent.firstElementChild);
	});
	reviewObserver.observe(reviewContent, { childList: true });
}
else {
	return;
}

function enableToggle(container) {
	for (const diffChoices of container.querySelectorAll('.diff-choices, .js-diff-choices')) {
		const checkbox = document.createElement('input');
		checkbox.type = 'checkbox';
		checkbox.checked = true;
		checkbox.addEventListener('change', (evt) => {
			diffChoices.closest('.suggested-edit, .js-revision-details').classList.toggle('no-diff-colors')
		});

		const toggleLabel = document.createElement('label');
		toggleLabel.className = 'diff-color-toggle';
		toggleLabel.appendChild(checkbox);
		toggleLabel.appendChild(document.createTextNode('Toggle diff colors'));

		diffChoices.insertBefore(toggleLabel, diffChoices.querySelector('br'));
	}
}

const style = document.createElement('style');
style.textContent = `
	.no-diff-colors .diff-add,
	.no-diff-colors .diff-delete {
		color: inherit;
		background: inherit;
		text-decoration: inherit;
	}
	.diff-color-toggle {
		display: inline-block;
		padding-top: 5px;
		padding-left: 10px;
	}
`;
document.getElementsByTagName('head')[0].appendChild(style);

~diff-toggle.png