title: How to switch between themes in Ant design v4 dynamically?
body: <p>I'd like to implement <strong>switching between dark/light theme dynamically</strong> with Ant design v4.</p>
  <p>It's possible to customize the theme with other CSS/LESS imports as it's written here:
  <a href="https://ant.design/docs/react/customize-theme#Use-dark-theme" rel="noreferrer">https://ant.design/docs/react/customize-theme#Use-dark-theme</a></p>
  <p>But I'm not sure how to switch between those themes dynamically from the code. I have a variable in my React app (<code>darkMode</code>) which indicates if the dark theme is currently used. I have to provide correct CSS files when this variable is changed. But I can't import CSS dynamically only when some condition is fulfilled, because it's not way how the imports work.</p>
  <p>I tried to do something messy with <code>require</code> like in the following code, but it's a very very bad approach and it's still not working properly (because CSS is injected but probably not withdrawn.
  ):</p>
  <pre class="lang-js prettyprint-override"><code>const Layout = () =&gt; {
    ...
    useEffect(() =&gt; {
      if (darkMode === true) {
        require(&quot;./App.dark.css&quot;)
      } else {
        require(&quot;./App.css&quot;)
      }
    }, [darkMode])
  
    return (
      &lt;Home /&gt;
    )
  }
  </code></pre>
  <p>It should be possible to switch themes somehow because it's already implemented in Ant design docs (<a href="https://ant.design/components/button/" rel="noreferrer">https://ant.design/components/button/</a>):</p>
  <p><a href="https://i.stack.imgur.com/DR8P6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DR8P6.png" alt="Theme switch in Antd docs" /></a></p>
  <p>Do you have any idea how to do it?</p>
  <p>Thanks!</p>