Update readme.md

README.md

@@ -5,7 +5,7 @@
 ## 前言 ##
 之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。所以我就把开发这个后台管理系统的经验，总结了这个后台管理系统解决方案。
 
-该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。
+该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色，支持手动切换主题色，而且很方便使用自定义主题色。
 
 ## 功能 ##
 - [x] Element UI
@@ -16,6 +16,7 @@
 - [x] 富文本编辑器
 - [x] markdown编辑器
 - [x] 图片拖拽/裁剪上传
+- [x] 支持切换主题色
 
 
 ## 目录结构介绍 ##
@@ -250,7 +251,7 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
 ```
 
 ## 其他注意事项 ##
-如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
+### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
 
 举个栗子，我不想用 vue-datasource 这个组件，那我需要分四步走。
 
@@ -276,3 +277,21 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
 	npm un vue-datasource -S
 
 完成。
+
+### 如何切换主题色呢？ ###
+
+很简单，首先打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
+
+```javascript
+import 'element-ui/lib/theme-default/index.css';    // 默认主题
+// import '../static/css/theme-green/index.css';       // 浅绿色主题
+```
+
+然后打开 src/App.vue 文件，找到 <style> 标签引入样式的地方，切换成浅绿色主题。
+
+```javascript
+@import "../static/css/main.css";
+@import "../static/css/color-dark.css";     /*深色主题*/
+/*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
+```
+最后，打开 src/components/common/Sidebar.vue 文件，找到 <el-menu> 标签，把 theme="dark" 去掉即可。
\ No newline at end of file