dva-cli icon indicating copy to clipboard operation
dva-cli copied to clipboard

antd customize-theme not working/supported

Open ctalpandey opened this issue 8 years ago • 6 comments

Excerpts from Antd Customize Theme-Recommanded Way:

  This approach is working only when using atool-build(built in antd-init and dva-cli).

First, I tried the antd-init example, which uses dora-webpack plugin. As first step, I tried changing 'body-background' using theme.js provided in example. And I was successful (the background color changed when I restarted app using 'npm start').

Then I tried same using dva-cli. Created default app (using 'dva new myapp'). And added => "theme": "./theme.js" to package.json with theme.js as below:

module.exports = () => {
  return {
    'body-background': '#00ff00',
  };
};

But its not working, though same works for antd-init example which uses dora-webpack plugin. It will be great if you can provide an similar example using dva-cli.

ctalpandey avatar Feb 08 '17 07:02 ctalpandey

Try https://github.com/dvajs/dva-example-user-dashboard and checkout this commit .

sorrycc avatar Feb 09 '17 00:02 sorrycc

Thanks a lot for the reply! Roadhog rocks! I am able to set Default Variables using this approach. However, I was looking for customized color and background-color for ant-modal-header/footer but without changing component-color and text-color which has global impact. Can we set the same using roadhog someway? or do roadhog support custom.less file to override defaults? Any help/info is greatly appreciated; you can close this issue otherwise.

ctalpandey avatar Feb 10 '17 09:02 ctalpandey

https://github.com/dvajs/dva/issues/575

afc163 avatar Feb 10 '17 17:02 afc163

https://github.com/ant-design/ant-design/commit/10199e5d9697d9cd21de7b5ee3e1b07756c7bd9c

afc163 avatar Feb 10 '17 17:02 afc163

I think the above references shows examples of Default Variables only; not more complex like ant-modal header/footer or use of custom.less file to override theme.

ctalpandey avatar Feb 16 '17 05:02 ctalpandey

I tried Customize Theme-alternative way.

My custom file looks as below:

.@{dialog-prefix-cls} {
  &-header {
    background: @heading-color;
  }
}

But still it did not work (I imported official and custom less file just after importing index.css in index.js). Does dva-cli supports alternative way (even adding '@primary-color: "#1DA57A";' to custom .less file does not work)? Can the above thing is possible by updating theme in roadhog (as mentioned earlier, it's successful for Default Variable only .e.g. primary-color)?

ctalpandey avatar Feb 21 '17 01:02 ctalpandey