title: Switch between two external css files in react
body: <p>I want to apply an option where user can switch between dark mode and light mode in the application.</p>
  <pre><code>     &lt;link rel=&quot;stylesheet&quot; href=&quot;../src/cssf/light.css&quot;&gt;
       &lt;link rel=&quot;stylesheet&quot; href=&quot;../src/cssf/dark.css&quot;&gt;
  </code></pre>
  <p>I have two sheets for the whole website.</p>
  <pre><code>&lt;label class=&quot;form-check-label&quot; id=&quot;dark&quot;&gt;
                              &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; checked name=&quot;theme&quot;&gt;&lt;label&gt;Dark&lt;/label&gt;
                            &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;form-check-inline&quot;&gt;
                            &lt;label class=&quot;form-check-label&quot; id=&quot;light&quot;&gt;
                              &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; name=&quot;theme&quot;&gt;&lt;label&gt;Light&lt;/label&gt;
                            &lt;/label&gt;
  </code></pre>
  <p>I have given the option but what do i have to do to switch between the two css files?</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./cssf/style.css&quot;;
  import logo from &quot;./cssf/logo-sm.png&quot;;
  
  function App() {
  
    const [ stylePath, setStylePath ] = useState(&quot;./cssf/dark-theme.css&quot;);
      
    const handleButtonClick = () =&gt; {
      setStylePath(&quot;./cssf/light-theme.css&quot;);
    }
  
    useEffect(() =&gt; {
      var head = document.head;
      var link = document.createElement(&quot;link&quot;);
  
      link.type = &quot;text/css&quot;;
      link.rel = &quot;stylesheet&quot;;
      link.href = stylePath;
  
      head.appendChild(link);
  
      return () =&gt; { head.removeChild(link); }
  
    }, [stylePath]);
  </code></pre>
  <p>I used this method and it is updating the link tag perfectly in the head but without importing it to my app using import &quot;../cssf/sheername.css&quot; it is of no use.How can i solve it?</p>