diff --git a/package.json b/package.json index 51a9eda91e99287705bef90c6865e09e1270bc69..650e5e9211c29e13ae68bb8a55a8eca2472e3711 100755 --- a/package.json +++ b/package.json @@ -25,11 +25,12 @@ "@babel/polyfill": "^7.0.0-beta.36", "@types/react": "^16.3.8", "@types/react-dom": "^16.0.5", - "bizcharts-plugin-slider": "^2.0.3", "antd": "^3.4.3", + "antd-theme-webpack-plugin": "^1.0.8", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-runtime": "^6.9.2", "bizcharts": "^3.1.5", + "bizcharts-plugin-slider": "^2.0.3", "classnames": "^2.2.5", "dva": "^2.2.3", "dva-loading": "^1.0.4", diff --git a/src/components/Sidebar/ThemeColor.js b/src/components/Sidebar/ThemeColor.js index 78a63aaea21ba67b1280079218448db51dbb3856..cd961fcfce70b4e7c07b3884e1561dd62446fb12 100644 --- a/src/components/Sidebar/ThemeColor.js +++ b/src/components/Sidebar/ThemeColor.js @@ -30,15 +30,12 @@ const ThemeColor = ({ colors, value, onChange }) => { '#EB2F96', ]; } - return (

主题颜色

- {colorList.map((color) => { + {colorList.map(color => { const classname = - value === color - ? `${styles.colorBlock} ${styles.active}` - : styles.colorBlock; + value === color ? `${styles.colorBlock} ${styles.active}` : styles.colorBlock; return ( { this.changeSetting('collapse', !this.state.collapse); }; + colorChange = color => { + window.less + .modifyVars({ + '@primary-color': color, + }) + .then(() => {}) + .catch(() => { + message.error(`Failed to update theme`); + }); + this.changeSetting('themeColor', color); + }; render() { const radioStyle = { display: 'block', @@ -174,10 +185,7 @@ class Sidebar extends PureComponent { - this.changeSetting('themeColor', color)} - /> + diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000000000000000000000000000000000000..13f3b9643a35e130eaf950dd7a3f2dfe28b70e3a --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,19 @@ +import AntDesignThemePlugin from 'antd-theme-webpack-plugin'; + +const path = require('path'); + +export default webpackConfig => { + const options = { + antDir: path.join(__dirname, './node_modules/antd'), + stylesDir: path.join(__dirname, './src'), + varFile: path.join(__dirname, './node_modules/antd/lib/style/themes/default.less'), + mainLessFile: path.join(__dirname, './src/index.less'), + themeVariables: ['@primary-color'], + indexFileName: 'index.html', + }; + + const themePlugin = new AntDesignThemePlugin(options); + // in config object + webpackConfig.plugins.push(themePlugin); + return webpackConfig; +};