How to apply antd dark theme for a React App?

Question

I want to use this dark theme for my new react web app : https://github.com/ant-design/ant-design-dark-theme

After following directions on customizing theme here and directions on applying the theme in README here my config-overrides.js looks like this:

const { darkTheme } = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: darkTheme
  }),
);

This does not seem to be working. For example, I have a Menu antd component still showing up in "light" theme instead of "dark" theme.

I would like to have all my antd components render with the dark theme without me explicitly setting it. Is that possible? If yes, what am I doing wrong?

Not a frontend dev here, so please let me know if I am missing something obvious.

Answer 1

The solution that worked for me was a combination of both @JoseFelix and @Anujs answers. Thank you both for the answers:

const darkTheme = require('@ant-design/dark-theme');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: darkTheme.default
  }),
);