diff --git a/docs/markdown/en-US/theme.md b/docs/markdown/en-US/theme.md index e66ced2d9..c144975e1 100644 --- a/docs/markdown/en-US/theme.md +++ b/docs/markdown/en-US/theme.md @@ -1,20 +1,20 @@ -## Custom Theme (In translation) +## Custom Theme `Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods: -### 方案一. PostCSS 插件 -在项目中直接引入组件对应的 postcss 源代码,并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量,步骤如下: +### Option 1. PostCSS Plugin +You can import the postcss source code in your own project, then use [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) to replace the postcss variable. ```javascript -// 引入基础样式 +// import base style import 'vant/packages/vant-css/src/base.css'; -// 引入组价对应的样式 +// import component style 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) +Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css). ```javascript module.exports = { @@ -39,17 +39,16 @@ module.exports = { }; ``` -### 方案二. 本地构建 -可以通过在本地构建 vant-css 的方式生成所需的主题 +### Option 2. Local build +Vant also support local build to custom themes. ```bash -# 克隆仓库 +# Clone the repository git clone git@github.com:youzan/vant.git cd packages/vant-css ``` -在本地 vant-css 仓库中,修改 src/common/var.css 中的颜色变量,然后执行以下构建命令,即可生成对应的样式文件 +In the local vant-css repository, modify the variables in src/common/var.css, then execute the following build command to generate the style file. ```bash npm run build ``` - diff --git a/docs/markdown/zh-CN/theme.md b/docs/markdown/zh-CN/theme.md index 73cfeec5a..1c5150e8a 100644 --- a/docs/markdown/zh-CN/theme.md +++ b/docs/markdown/zh-CN/theme.md @@ -9,7 +9,7 @@ // 引入基础样式 import 'vant/packages/vant-css/src/base.css'; -// 引入组价对应的样式 +// 引入组件对应的样式 import 'vant/packages/vant-css/src/button.css'; import 'vant/packages/vant-css/src/checkbox.css'; ``` diff --git a/docs/src/components/DemoPages.vue b/docs/src/components/DemoPages.vue index 89f0ca2bb..c6a82f1af 100644 --- a/docs/src/components/DemoPages.vue +++ b/docs/src/components/DemoPages.vue @@ -1,14 +1,14 @@