[Doc] add custom theme document (#251)

* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

docs/examples-docs/zh-CN/quickstart.md

@@ -59,27 +59,6 @@ Vue.use(Vant);
 <script src="https://unpkg.com/vant/lib/vant.min.js"></script>
 ```
 
-### 自定义主题
-
-`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
-
-#### 下载主题
-
-可以通过 Github 或 npm 来下载主题：
-
-```bash
-# npm
-npm i vant-css -D
-
-# github
-git clone git@github.com:youzan/vant.git
-cd packages/vant-css
-```
-
-#### 修改主题
-
-修改你下载主题对应的样式即可，然后引入你修改后的主题。
-
 ### vue-cli 模板
 可以使用`vue-cli`来初始化`Vant`的通用模板：
 

docs/examples-docs/zh-CN/theme.md

@@ -0,0 +1,55 @@
+### 定制主题
+
+`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
+
+### 方案一. PostCSS 插件
+在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
+
+```javascript
+// 引入基础样式
+import 'vant/packages/vant-css/src/base.css';
+
+// 引入组价对应的样式
+import 'vant/packages/vant-css/src/button.css';
+import 'vant/packages/vant-css/src/checkbox.css';
+```
+
+接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
+
+```javascript
+module.exports = {
+  plugins: [
+    require('postcss-easy-import')({
+      extensions: ['pcss', 'css']
+    }),
+    require('postcss-theme-variables')({
+      vars: {
+        red: '#F60',
+        gray: '#CCC',
+        blue: '#03A9F4'
+      },
+      prefix: '$'
+    }),
+    require('precss')(),
+    require('postcss-calc')(),
+    require('autoprefixer')({
+      browsers: ['Android >= 4.0', 'iOS >= 7']
+    })
+  ]
+};
+```
+
+### 方案二. 本地构建
+可以通过在本地构建 vant-css 的方式生成所需的主题
+
+```bash
+# 克隆仓库
+git clone git@github.com:youzan/vant.git
+cd packages/vant-css
+```
+
+在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
+```bash
+npm run build
+```
+

docs/src/doc.config.js

@@ -35,6 +35,11 @@ module.exports = {
                 title: '更新日志',
                 noExample: true
               },
+              {
+                path: '/theme',
+                title: '定制主题',
+                noExample: true
+              },
               {
                 path: '/demo',
                 title: '示例页面',