title: Style disappear for a moment on page refresh
body: <p>It's a simple html page and i'm changing the style sheet (switching between dark and light theme) on button click using the following functions:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function setDarkTheme() {
     document.getElementById('style1').href = "css/Dark.css";
     document.getElementById('style2').href = "css/skins/skin-dark.css"; 
    }
    
    function setDefaultTheme() {
     document.getElementById('style1').href = "css/Light.css";
     document.getElementById('style2').href = "css/skins/skin-light.css";
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, the current theme value is being saved in browser localstorage which is checked outside the jquery ready function to set the style-sheet before page is loaded (whenever user comes back to the site).</p>
  
  <p>The problem (both on Chrome and firefox) is that when user switch to dark theme and refresh the page, styling disappear for a second and then comes back. If user switch back to light/default theme and refresh the page it works fine without any glitch. The default href value of style-sheet is set to the light theme in the html page.</p>
  
  <p>Is there any way to get rid of that glitch ? Any suggestions will be great.</p>