I think the best thing to do would be to create classes for each color (eg, dark, light, default) and when clicking the button changes only the class of the parent element, the rest is already defined inside.
ex:
var dark = document.getElementById('btnDark');
var light = document.getElementById('btnLight');
var initial = document.getElementById('btnInitial');
var body = document.querySelector('body');
dark.onclick = function(){
body.className = "dark";
}
light.onclick = function(){
body.className = "light";
}
initial.onclick = function(){
body.className = "";
}
.dark{
background:#000;
color:#fff;
}
.light{
background:#fff;
color:#4b4b4b;
}
<body>
<h2>Lorem Ipsum é simplesmente</h2>
<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica.</p>
<button id="btnDark">Dark</button>
<button id="btnLight">Light</button>
<button id="btnInitial">Default</button>
</body>
Use sass to create classes, it would make it much easier.
PS: In the example above I did not use any libraries.