mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
55 lines
1.5 KiB
Markdown
55 lines
1.5 KiB
Markdown
## 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:
|
|
|
|
### 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/style/base.css';
|
|
|
|
// import component style
|
|
import 'vant/packages/button/index.css';
|
|
import 'vant/packages/checkbox/index.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/style/var.less).
|
|
|
|
```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']
|
|
})
|
|
]
|
|
};
|
|
```
|
|
|
|
### 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/style
|
|
```
|
|
|
|
In the local style repository, modify the variables in src/var.less, then execute the following build command to generate the style file.
|
|
```bash
|
|
npm run build
|
|
```
|