Nothing works =(

[werytert]

So, i follow your instruction, and create config-overrides.js, variables.less, color.less, and change my code in index.html, but when i tried do window.less.modifyVars(vars), nothing happend.

my code for change:

import 'path';
import {message} from 'antd';


export const changeTheme = (isDark) => {

    let vars = {
        '@primary-color': '#ff00ff',
        '@secondary-color': '#ff00ff',
        '@text-color': '#ff00ff',
        '@text-color-secondary': '#ff00ff',
    };

    window.less
        .modifyVars(vars)
        .then(() => {
            message.success(isDark ? "We have cookies" : "Let the force be with you");
            console.log(window.less);
        })
        .catch(error => {
            message.error(error.toString());
        });
};

my config-overrides.js

import 'path';
import {message} from 'antd';


export const changeTheme = (isDark) => {

    let vars = {
        '@primary-color': '#ff00ff',
        '@secondary-color': '#ff00ff',
        '@text-color': '#ff00ff',
        '@text-color-secondary': '#ff00ff',
    };

    window.less
        .modifyVars(vars)
        .then(() => {
            message.success(isDark ? "We have cookies" : "Let the force be with you");
            console.log(window.less);
        })
        .catch(error => {
            message.error(error.toString());
        });
};

my variables.less

@import "~antd/lib/style/themes/default.less";

@primary-color: #1DA57A;
@secondary-color: #ccc;
@text-color: fade(@black, 65%);
@text-color-secondary: fade(#1DA57B, 65%);

config-overrides.js is in root

i can see some data in local storage, but interface colors is not changing

[mzohaibqc]

@werytert Your config-overrides.js is not correct as posted by you in this issue. Are you adding this in nw project then you can simply clone this project and build on top of this but if you are already using react-app-rewired then you doing something wrong which in case seems like your config-overrides.js is not what is should like.

Here is sample config-overrides.js

const path = require('path');
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

const options = {
  stylesDir: path.join(__dirname, './src/less'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/less/vars.less'),
  mainLessFile: path.join(__dirname, './src/less/main.less'),
  themeVariables: [
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background',
    '@btn-primary-bg',
    '@layout-header-background',
    '@border-color-base'
  ],
  indexFileName: 'index.html',
  generateOnce: false // generate color.less on each compilation
}
module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: {
      '@primary-color': '#00375B',
      '@text-color-secondary': '#eb2f96',
      '@heading-color': '#fa8c16'
    },
    javascriptEnabled: true
  })(config, env);
  config.plugins.push(new AntDesignThemePlugin(options));
  return config;
};

[werytert]

@mzohaibqc So, what i must write in vars.less and main.less?

[werytert]

@mzohaibqc And can you give a little instruction, because what I found is not valid now, i think. I have a react project and want use your code to create dark theme, how can i do it? I hope u will help me

[mzohaibqc]

ping me on google hangout. We can have a short call to discuss the issue if it suites you. I'm available after 3 AM my time (GMT + 5).