test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-05 05:29:01 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
62b698c007
ant-design-vue/docs/vue/customize-theme.en-US.md
tangjinzhou 46b4cd5d43 docs: update customize-theme
2018-06-04 18:36:46 +08:00

2.9 KiB
Raw Blame History

Customize Theme

The structure and styles of vue-antd-ui are exactly the same as those of Antd. You can refer to the Antd React customization mode for configuration.

Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.

Less variables

We are using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.

Please report an issue if the existing list of variables is not enough for you.

How to do it

We recommend modifyVars to override the default values of the variables. There are two ways to achieve it in practice.

1) Using theme property (recommended way)

Specify the theme property in the package.json or .webpackrc file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:

  • example of directly specifying the custom values as an object:
"theme": {
  "primary-color": "#1DA57A",
},

you can write a webpack config about less-loader modifyVars like atool-build does.

Note:

  • Importing styles from less files is necessary.
    • If you import styles by specifying the style option of babel-plugin-import, change it from 'css' to true, which will import the less version of antd.
    • If you import styles from 'vue-antd-ui/dist/antd.css', change it to vue-antd-ui/dist/antd.less.
  • If you want to override @icon-url, the value must be contained in quotes like "@icon-url": "'your-icon-font-path'".

2) Overriding Less variables (alternative way)

Override variables via less definition files.

Create a standalone less file like the one below, and import it in your project.

@import "~vue-antd-ui/dist/antd.less";   // import official less entry file
@import "your-theme-file.less";   // override variables here

Note: This way will load the styles of all components, regardless of your demand, which cause style option of babel-plugin-import not working.

Related Articles