The javascript would then need to only add/remove the dark/light body class as required.

var activated = 0;
document.getElementById("button").addEventListener('click', function () {
	if (activated == 0) {			
		document.body.setAttribute("style", "background-color: white; color: black !important");
		activated = 1;
	} else {			
		document.body.setAttribute("style", "background-color: black; color: white !important");
		activated = 0;
	}
});

Adding the !important tag to your color attribute should override most of the color on the page, depending on how your theme’s style sheet is setup.

var activated = 0;
document.getElementById("button").addEventListener('click', function () {
	if (activated == 0) {
		setStyle("background-color: white; color: black !important");
		activated = 1;
	} else {			
		setStyle("background-color: black; color: white !important");
		activated = 0;
	}
});

function setStyle(myStyle) {
	var elements = document.getElementsByTagName("*");
	for(var i in elements) {
		if(elements[i].setAttribute) {
			elements[i].setAttribute("style", myStyle);
		}
	}
}