add theme change

c0bf7546 · jim · 陈帅 · 6816dd86 · c0bf7546 · c0bf7546
Commit c0bf7546 authored Apr 29, 2018 by jim Committed by 陈帅 May 18, 2018
4 changed files
--- 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",

--- a/src/components/Sidebar/ThemeColor.js
+++ b/src/components/Sidebar/ThemeColor.js
@@ -30,15 +30,12 @@ const ThemeColor = ({ colors, value, onChange }) => {
      '#EB2F96',
    ];
  }
-
  return (
    <div className={styles.themeColor}>
      <h3 className={styles.title}>主题颜色</h3>
-      {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 (
          <Tag
            className={classname}

--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
 import React, { PureComponent, Fragment } from 'react';
-import { Select, List, Switch, Divider, Radio } from 'antd';
+import { Select, message, List, Switch, Divider, Radio } from 'antd';
 import DrawerMenu from 'rc-drawer-menu';
 import styles from './index.less';
 import ThemeColor from './ThemeColor';
@@ -133,6 +133,17 @@ class Sidebar extends PureComponent {
  togglerContent = () => {
    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 {
                  <ColorBlock color="#E9E9E9" title="浅色导航" />
                </Radio>
              </RadioGroup>
-              <ThemeColor
-                value={this.state.themeColor}
-                onChange={color => this.changeSetting('themeColor', color)}
-              />
+              <ThemeColor value={this.state.themeColor} onChange={this.colorChange} />
            </Body>
            <Divider style={{ margin: 0 }} />
            <Body title="导航设置 ">

--- a/webpack.config.js
+++ b/webpack.config.js
+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;
+};