From c0bf754654a378393dce84ed3ca1424b231b9f72 Mon Sep 17 00:00:00 2001 From: jim Date: Sun, 29 Apr 2018 20:05:05 +0800 Subject: [PATCH] add theme change --- package.json | 3 ++- src/components/Sidebar/ThemeColor.js | 7 ++----- src/components/Sidebar/index.js | 18 +++++++++++++----- webpack.config.js | 19 +++++++++++++++++++ 4 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 webpack.config.js diff --git a/package.json b/package.json index 51a9eda9..650e5e92 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 78a63aae..cd961fcf 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 00000000..13f3b964 --- /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; +}; -- GitLab