how to use craco with antd for theme switching?

Question

I am trying to use Craco with Ant-Design but I am unable to make a proper theme switcher. Is there an easier way to implement a theme switcher for this?

const CracoLessPlugin = require("craco-less");
const {
    getThemeVariables
} = require('antd/dist/theme');

module.exports = {
    plugins: [{
        plugin: CracoLessPlugin,
        options: {
            lessLoaderOptions: {
                lessOptions: {
                    modifyVars: {
                        "@primary-color": "#1DA57A",
                        ...getThemeVariables({
                            dark: true,
                            compact: true
                        })
                    },
                    javascriptEnabled: true
                }
            }
        }
    }],
};

Answer 1

I was able to just include an import into my main CSS file inside of App.js right before the import for antd.less

To import the dark theme I did this:

@import '~antd/lib/style/themes/dark.less';
@import '~antd/dist/antd.less';

You can learn more here https://ant.design/docs/react/customize-theme#Customize-in-less-file