title: Replacing css file on the fly (and apply the new style to the page)
body: <p>I have a page which has <code>&lt;link&gt;</code> in the header that loads the CSS named <code>light.css</code>. I also have a file named <code>dark.css</code>. I want a button to swap the style of the page all together (there are 40 selectors used in css file and some do not match in two files).</p>
  
  <p>How can I remove reference to <code>light.css</code> with JS and remove all the styles that were applied and then load <code>dark.css</code> and apply all the styles from that? I can't simply reset all of the elements, since some of the styles are applied through different css files and some are dynamically generated by JS. Is there a simple, yet effective way to do that without reloading the page? Vanilla JS is preferable, however I will use jQuery for later processing anyways, so jQ is also fine.</p>