title: React: antd change dark or light theme on runtime
body: <p>There is a similar question posted in <a href="https://stackoverflow.com/questions/57125135/how-to-customize-antd-theme-on-runtime">stack overflow</a>, but the posted answer cannot help me. I have followed the steps, but there is no effect. Basically, I have no idea where to put this config-overrides.js as shown in the answer, and it seems many modules yet to be installed.</p>
  <p>Besides that, I have also followed the <a href="https://ant.design/docs/react/use-with-create-react-app#Customize-Theme" rel="noreferrer">antd website</a> to configure the web application to run a dark theme. It is able to change to dark theme after web application has started. The following is the code, but how can I select the theme i.e. dark or light I want on runtime?</p>
  <p><strong>Project Structure:</strong></p>
  <p><img src="https://i.stack.imgur.com/wuHVw.png?s=256" alt="Project structure" /></p>
  <p><strong>package.json:</strong> (changes on scripts portion)</p>
  <pre><code>{
    &quot;name&quot;: &quot;testout&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@ant-design/dark-theme&quot;: &quot;^2.0.2&quot;,
      &quot;@craco/craco&quot;: &quot;^5.6.4&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.5.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.2.1&quot;,
      &quot;antd&quot;: &quot;^4.6.4&quot;,
      &quot;antd-theme&quot;: &quot;^0.3.4&quot;,
      &quot;craco-less&quot;: &quot;^1.17.0&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-scripts&quot;: &quot;3.4.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;craco start&quot;,
      &quot;build&quot;: &quot;craco build&quot;,
      &quot;test&quot;: &quot;craco test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
     
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React from 'react';
  import './App.less';
  import 'antd/dist/antd.less';
  import { Button, Select } from 'antd';
  function App() {
    const { Option } = Select;
  
    function handleChange(value) {
      console.log(`selected ${value}`);
    }
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Button type=&quot;primary&quot;&gt;Button&lt;/Button&gt;
        &lt;Select defaultValue=&quot;lucy&quot; style={{ width: 120 }} onChange={handleChange}&gt;
          &lt;Option value=&quot;jack&quot;&gt;Jack&lt;/Option&gt;
          &lt;Option value=&quot;lucy&quot;&gt;Lucy&lt;/Option&gt;
          &lt;Option value=&quot;disabled&quot; disabled&gt;
            Disabled
        &lt;/Option&gt;
          &lt;Option value=&quot;Yiminghe&quot;&gt;yiminghe&lt;/Option&gt;
        &lt;/Select&gt;
  
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>craco.config.js</strong></p>
  <pre><code>const CracoLessPlugin = require('craco-less');
  const { getThemeVariables } = require('antd/dist/theme');
  
  
  module.exports = {
    plugins: [
      {
        plugin: CracoLessPlugin,
        options: {
          lessLoaderOptions: {
            lessOptions: {
              modifyVars:  getThemeVariables({
                           dark: true, 
                           compact: true,
              }),
              javascriptEnabled: true,
            },
          },
        },
      },
    ],
  };
  </code></pre>
  <p><strong>Output:</strong></p>
  <p><img src="https://i.stack.imgur.com/bQzif.png?s=256" alt="Project structure" /></p>