body {
	/* regular ... "default"  OK? */
	background-color: lightgray;
	min-height: 100vh;
}

body.fancy {
	background: 
		linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
	/* whatever styles... */
}





/* 
	https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
*/




















































































body {
	padding: 30px;
}

var body = document.querySelector('body');
var toggle = document.querySelector('button');


function toggleTheme() {
	body.classList.toggle('fancy'); // "toggle" is like add/remove
}
/*
	<div class='one two see Im a list'> ... 

	element.classList is an array of the classes!
*/


toggle.addEventListener('click', toggleTheme);
/*
	watch/listen for this "event" ( in this case "click" ) - 

	and then do the function (based on function name)
*/