title: how to replace logo's(images) based on the background theme
body: <p>I have two different images(logo), one for dark theme(it has light colored logo) and one for light theme(it has dark colored logo).</p>
  
  <p>User has freedom to choose either dark theme or light theme.
  But i am facing difficulty while replacing logo's. Can anybody please help me out with this?</p>
  
  <p>My two .png images are named as lightlogo.png and darklogo.png. When the page loads user gets to see dark themed UI.</p>
  
  <p>Here is my code to display logo</p>
  
  <pre><code>&lt;div class="nav-wrapper"&gt;
    &lt;a href="#!" class="brand-logo"&gt;
      &lt;image  src="../images/lightlogo.png" alt="image" id="imag"   class="hidden-xs " /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my code for theming</p>
  
  <pre><code>&lt;div id="icon-div"&gt;
    &lt;p&gt;
      &lt;i class="material-icons dp48"&gt;loop&lt;/i&gt;
    &lt;/p&gt;
    &lt;div id="icon-element"&gt;
      &lt;input type="button" id="light" value="light-theme"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my js where user can change the theme and i am trying to add image for light background(light theme)</p>
  
  <pre><code>$('#light').click(function() {
    if ($(this).val() == "light-theme") {
      $(this).val("dark-theme");
      changeCSS("styleLight.css", 0)
    }
    else {
      $(this).val("light-theme");
      changeCSS("styleDark.css", 0).attr("src" , "../images/darklogo.png");
    }
  });
  
  function changeCSS(cssFile, cssLinkIndex) {
  
    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
  
    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", "/stylesheets/"+cssFile);
  
    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
  }
  </code></pre>