Skip to content

GitLab

P
pro-blocks
Commit c0bf7546 authored by jim's avatar jim Committed by 陈帅
Browse files
Options

add theme change

parent 6816dd86
Show whitespace changes
Inline Side-by-side
Showing with 36 additions and 11 deletions
src/components/Sidebar/ThemeColor.js
View file @ c0bf7546
...@@ -30,15 +30,12 @@ const ThemeColor = ({ colors, value, onChange }) => { ...@@ -30,15 +30,12 @@ const ThemeColor = ({ colors, value, onChange }) => {
'#EB2F96', '#EB2F96',
]; ];
} }
return ( return (
<div className={styles.themeColor}> <div className={styles.themeColor}>
<h3 className={styles.title}>主题颜色</h3> <h3 className={styles.title}>主题颜色</h3>
{colorList.map((color) => { {colorList.map(color => {
const classname = const classname =
value === color value === color ? `${styles.colorBlock} ${styles.active}` : styles.colorBlock;
? `${styles.colorBlock} ${styles.active}`
: styles.colorBlock;
return ( return (
<Tag <Tag
className={classname} className={classname}
......
src/components/Sidebar/index.js
View file @ c0bf7546
import React, { PureComponent, Fragment } from 'react'; 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 DrawerMenu from 'rc-drawer-menu';
import styles from './index.less'; import styles from './index.less';
import ThemeColor from './ThemeColor'; import ThemeColor from './ThemeColor';
...@@ -133,6 +133,17 @@ class Sidebar extends PureComponent { ...@@ -133,6 +133,17 @@ class Sidebar extends PureComponent {
togglerContent = () => { togglerContent = () => {
this.changeSetting('collapse', !this.state.collapse); 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() { render() {
const radioStyle = { const radioStyle = {
display: 'block', display: 'block',
...@@ -174,10 +185,7 @@ class Sidebar extends PureComponent { ...@@ -174,10 +185,7 @@ class Sidebar extends PureComponent {
<ColorBlock color="#E9E9E9" title="浅色导航" /> <ColorBlock color="#E9E9E9" title="浅色导航" />
</Radio> </Radio>
</RadioGroup> </RadioGroup>
<ThemeColor <ThemeColor value={this.state.themeColor} onChange={this.colorChange} />
value={this.state.themeColor}
onChange={color => this.changeSetting('themeColor', color)}
/>
</Body> </Body>
<Divider style={{ margin: 0 }} /> <Divider style={{ margin: 0 }} />
<Body title="导航设置 "> <Body title="导航设置 ">
......
webpack.config.js 0 → 100644
View file @ c0bf7546
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;
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment